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,161 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
Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 
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

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

744 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

16 Experts available now in Live!

Get 1:1 Help Now