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,169 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
Salesforce Has Never Been Easier

Improve and reinforce salesforce training & adoption using WalkMe's digital adoption platform. Start saving on costly employee training by creating fast intuitive Walk-Thrus for Salesforce. Claim your Free Account Now

 
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

Windows running painfully slow? Try these tips..

Stay away from Speed Up Computer Programs that do more harm than good.
Try these tips instead.
Step by step instructions in trouble shooting Windows Performance issues.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
migrating to phpbb forum from vBulletin 4.2 3 93
Chromium browser keeps re-appearing 3 49
Secure Website 5 38
CSS styling problem 3 24
This article offers some helpful and general tips for safe browsing and online shopping. It offers simple and manageable procedures that help to ensure the safety of one's personal information and the security of any devices.
SSL stands for “Secure Sockets Layer” and an SSL certificate is a critical component to keeping your website safe, secured, and compliant. Any ecommerce website must have an SSL certificate to ensure the safe handling of sensitive information like…
The viewer will learn how to count occurrences of each item in an array.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

739 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