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,165 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
Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

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

NAS Cloud Backup Strategies

This article explains backup scenarios when using network storage. We review the so-called “3-2-1 strategy” and summarize the methods you can use to send NAS data to the cloud

Question has a verified solution.

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

I annotated my article on ransomware somewhat extensively, but I keep adding new references and wanted to put a link to the reference library.  Despite all the reference tools I have on hand, it was not easy to find a way to do this easily. I finall…
If you are a web developer, you would be aware of the <iframe> tag in HTML. The <iframe> stands for inline frame and is used to embed another document within the current HTML document. The embedded document could be even another website.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

777 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