[2 days left] What’s wrong with your cloud strategy? Learn why multicloud solutions matter with Nimble Storage.Register Now

x
?
Solved

how do you get the non-CSS3 compliant Firefox to render vertical text using dhtml animation or some other means?

Posted on 2007-11-27
10
Medium Priority
?
1,172 Views
Last Modified: 2013-12-07
---------------------------------------------------------------------------------------------------------
i need a workaround for firefox's inability to render vertical text, as simulated at my site: http://www.realtoraccount.com/
---------------------------------------------------------------------------------------------------------
known NON-solutions/NON-workarounds:
- CSS3 writing-mode:tb-rl
- layout-flow:vertical-ideographic
- line breaks (html generated or javascript generated)
- image the vertical text
---------------------------------------------------------------------------------------------------------
possible solutions/workarounds:
- pre-animate the text before the page loads using dhtml to fake vertical text or trick Firefox
- firefox can render a "whole page" in IE using a firefox extension called IE-Tab, but what about just a "part of the page" instead and without the help of an extension?. *****Is it possible to manipulate html in such a way that only a small section of the html automatically gets rendered in IE at EVERY page load NO MATTER WHAT BROWSER is being used?(assuming the OS already has IE installed)*****
- any other ideas?
---------------------------------------------------------------------------------------------------------
This is how CSS3 writing-mode appears in Firefox:<br><br>
<table width="" border="0" cellpadding="0" cellspacing="0">
  <!--DWLayoutTable-->
  <tr> 
    <td width="28" height="120" background="http://www.realtoraccount.com/images/customizable-tab.gif" align="center" valign="middle" style="font-family: Arial; font-size: 10px; background-repeat: no-repeat;">Database Supplied Text 1</td> 
    <td width="28" background="http://www.realtoraccount.com/images/customizable-tab.gif" align="center" valign="middle" style="font-family: Arial; font-size: 10px; background-repeat: no-repeat;">Database Supplied Text 2</td> 
    <td width="28" background="http://www.realtoraccount.com/images/customizable-tab.gif" align="center" valign="middle" style="font-family: Arial; font-size: 10px; background-repeat: no-repeat;">Database Supplied Text 3</td> 
    <td width="28" background="http://www.realtoraccount.com/images/customizable-tab.gif" align="center" valign="middle" style="font-family: Arial; font-size: 10px; background-repeat: no-repeat;">Database Supplied Text 4</td> 
    <td width="28" background="http://www.realtoraccount.com/images/customizable-tab.gif" align="center" valign="middle" style="font-family: Arial; font-size: 10px; background-repeat: no-repeat;">Database Supplied Text 5</td>
  </tr>
</table>
 
<br><br><br><br>
 
This is how I need Firefox to render it:<br><br>
<table width="" border="0" cellpadding="0" cellspacing="0">
  <!--DWLayoutTable-->
  <tr> 
    <td width="28" height="150" background="http://www.realtoraccount.com/images/text1.gif" align="center" valign="middle" class="customizable-tabs">&nbsp;</td> 
    <td width="28" background="http://www.realtoraccount.com/images/text2.gif" align="center" valign="middle" class="customizable-tabs">&nbsp;</td> 
    <td width="28" background="http://www.realtoraccount.com/images/text3.gif" align="center" valign="middle" class="customizable-tabs">&nbsp;</td> 
    <td width="28" background="http://www.realtoraccount.com/images/text4.gif" align="center" valign="middle" class="customizable-tabs">&nbsp;</td> 
    <td width="28" background="http://www.realtoraccount.com/images/text5.gif" align="center" valign="middle" class="customizable-tabs">&nbsp;</td>
  </tr>
</table>

Open in new window

0
Comment
Question by:parmoni
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 4
10 Comments
 

Author Comment

by:parmoni
ID: 20362903
Thanks Humeniuk...sorry about that!
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 20364070
0
 

Author Comment

by:parmoni
ID: 20364284
Mplungjan,

I was very impressed with this new technology, but it won't work for my database text-writing needs. This solution requires Manual creation of text, but I need for my php/mySQL database to output the text in real time as vertical text instead of horizontal. I greatly appreciate your input however, so thankyou (my original question failed to mention the database factor...my apologies).

I'm thinking dhtml animation is the solution because it can pre-animate the text before the page loads, no??? If it is, does anyone have any simple dhtml/javascript that can trick Firefox into rendering true vertical text?

I thought of another solution...since I'm a graphic designer, I can create 26 images of each letter in the alphabet, flip the image 90 degrees counter clockwise, then export it as a transparent gif. Then all i have to do is tell my php to write/output the image that represents the letter, instead of having it write/output the letter that represents the letter.

While this is a potential solution, IT'S WAY TOO MUCH EXTRA WORK, especially when there's gotta be some other, more efficient workaround, such as pre-animating each letter to appear flipped over to the left 90 degrees???
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 2000 total points
ID: 20365258
There seems to be no filter or otherwise that will flip text in firefox

Here is some image filter
http://www.dhteumeuleu.com/colorsyntax/viewJS.php?src=string-ske.html

Very cool site by the way: http://www.dhteumeuleu.com/

How about rendering the text in an image object on the server and serve that instead?





<?php
 
header("Content-type: image/png");
$string = $_GET['text'];
$im     = imagecreatefrompng("images/button1.png");
$orange = imagecolorallocate($im, 220, 210, 60);
$px     = (imagesx($im) - 7.5 * strlen($string)) / 2;
$angle=90;
imagestring($im, 3, $px, 9, $string, $orange);
imagerotate($im, $angle, $orange);
imagepng($im);
imagedestroy($im);
 
?>

Open in new window

0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 20365262
0
 

Author Comment

by:parmoni
ID: 20365579
Mplungjan,

This is a very possible solution...please give me a few days to look into this! Thanks!
0
 
LVL 75

Assisted Solution

by:Michel Plungjan
Michel Plungjan earned 2000 total points
ID: 20365609
I think you want
imagerotate($im, $angle, 0);

by the way
0
 

Author Comment

by:parmoni
ID: 20415472
it works...thanks
0
 

Author Closing Comment

by:parmoni
ID: 31411342
I was hoping for a dhtml solution, not a php solution...nonetheless, the end result is the same and mplungian still solved my dilemma.
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to create an extensible mechanism for linked drop downs.
A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Suggested Courses

649 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question