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
1,163 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
  • 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
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 500 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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
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 500 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Several part series to implement Internet Explorer 11 Enterprise Mode
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
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 …

920 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now