asked on

Vertical text in IE, Firefox

How to show vertical text in IE and firefox using java script. I used the below script and it works fine in IE but in firefox it is not working (in firefox it is showing the text horizontally)

<style>
.vertical
{
writing-mode: tb-rl;
filter: flipH flipV;
letter-spacing:2px;
}
</style>

TName

Hi, this isn't javascript (it isn't a script at all), it's just a CSS ruleset (it describes how an HTML element should be presented).

Writing-mode is supported by IE but not by Gecko-based browsers like FF. Apparently, it will be part of CSS3:
http://www.w3.org/TR/2003/CR-css3-text-20030514/#writing-mode

nimaig

To solve this for non-IE

Check for browser type:
If IE use "style" as above with tl-rb

Otherwise create an image of vertical text and use "img"
(Firefox is only CSS2 compliant not CSS3)

Rajesh Dalmia

ASKER

the text the coming from database and using some java script i am changing the text in 10 sec interval, so i cannot use any image to show it vertically.
is there any other script that can work in both the browser.

TName

You can position text vertically in any browser by very simple means - just by adding a linebreak after each letter, e.g.:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Vertical</title>
</head>
<body>
<div style="text-align:center; width:40px; margin-right:40px;">T<br>h<br>i<br>s<br>&nbsp<br>i<br>s<br>&nbsp<br>a<br>&nbsp<br>t<br>e<br>s<br>t<br></div>
</body>
</html>

or using a table:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Vertical</title>
</head>
<body>
<table><tr><td style="text-align:center; width:100px;">T<br>h<br>i<br>s<br>&nbsp<br>i<br>s<br>&nbsp<br>a<br>&nbsp<br>t<br>e<br>s<br>t<br></td></tr></table>
</body>
</html>

Also have a look at these vertical lists:
http://www.cssplay.co.uk/menus/vertical.html

Rajesh Dalmia

ASKER

using line break is not a solution, becuase in that caes it will be fixed and as i said the text is coming out from db and it is getting changed in every 10 second. I have to use some script or stylesheet.

TName

You can add the line-breaks automatically to a any string. Here's a little script that does it (cross-browser):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Vertical</title>
<style>
#vertical {width:20px; text-align:center;}
</style>

<script>
var str='This is a text that should display vertically...';
var result='';
function showVerticalText() {
for (var i=0;i<str.length;i++) {
result+=(str.charAt(i)!=' ') ? str.charAt(i)+'<br>' : '&nbsp<br>';
}
document.getElementById('vertical').innerHTML=result;
}
</script>

</head>
<body onload="showVerticalText()">
<div id="vertical"><div>
</body>
</html>

Rajesh Dalmia

ASKER

the above code will show the text vertically 1st time when page loads but when the text gets changed after 10 sec that time how I will be able to change the allignment.
The current code that i am using is as below

<style>
.vertical
{
writing-mode: tb-rl;
ilter: flipH flipV;
letter-spacing:2px;
}
</style>

<script language='JavaScript1.2' type='text/javascript'>
var variableslide=new Array()
variableslide[0]=['img/1.gif', '', '<span class="vertical" ><font size="-1" color="#FF0000">Text1</font></span>']
variableslide[1]=['img/2.gif', '', '<span class="vertical" ><font size="-1" color="#FF0000">Text2</font></span>']
variableslide[2]=['img/3.gif', '', '<span class="vertical" ><font size="-1" color="#FF0000">Text3</font></span>']
</Script>

I am using a array of images with text and it is getting changed after 10 sec (only relavent code I have pasted, image rotation code I have removed).

TName

Just see a semicolon is missing here: '&nbsp<br>';

So replace this line
result+=(str.charAt(i)!=' ') ? str.charAt(i)+'<br>' : '&nbsp<br>';
with this line:
result+=(str.charAt(i)!=' ') ? str.charAt(i)+'<br>' : ' <br>';

TName

>the above code will show the text vertically 1st time when page loads but when the text gets changed after 10 sec that time how I will be able to change the allignment.

Just pass the new text to the showVerticalText() function (I've slightly changed the function, see below).
Have a look at this example (type repeatedly some text into the textbox and press the button):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Vertical</title>
<style>
#vertical {width:20px; text-align:center;}
</style>

<script>

function showVerticalText(str) {
var result='';
for (var i=0;i<str.length;i++) {
result+=(str.charAt(i)!=' ') ? str.charAt(i)+'<br>' : ' <br>';
}
return result;
}

function changeText() {
var theText=document.getElementById('txt').value;
document.getElementById('vertical').innerHTML=showVerticalText(theText);
}
</script>

</head>
<body>
<input type="text" id='txt'>
<br>
<input type="button" onClick="changeText();">
<br>
<div id="vertical"><div>
</body>
</html>

TName

And this will refresh the display every 3 seconds (keep changing the text in the textbox...)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Vertical</title>
<style>
#vertical {width:20px; text-align:center;}
</style>

<script>

function showVerticalText(str) {
var result='';
for (var i=0;i<str.length;i++) {
result+=(str.charAt(i)!=' ') ? str.charAt(i)+'<br>' : ' <br>';
}
return result;
}

function changeText() {
var theText=document.getElementById('txt').value;
document.getElementById('vertical').innerHTML=showVerticalText(theText);
}

window.onload=function(){ setInterval('changeText();',3000); }
</script>

</head>
<body>
<input type="text" id='txt'>
<br>
<div id="vertical"><div>
</body>
</html>

TName

BTW, do not use language='JavaScript1.2'... You might get problems with FF.

Instead of
<script language='JavaScript1.2' type='text/javascript'>
just write:
<script type='text/javascript'>

Rajesh Dalmia

ASKER

I have setup the code in the site "http://www.middle-east-monitor.com". you can check how the image and text is changing based on time interval. is it possible to implement ur code in the script that is being currently used in that site.

ASKER CERTIFIED SOLUTION

TName

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

TName

The above code would of course *replace* this script block from your page! :

<script language='JavaScript1.2' type='text/javascript'>
var variableslide=new Array()
variableslide[0]=['/LeadPhoto/LP-3-1nu.jpg', '', '<span class="vertical" style="font-family:Verdana; color:#FF0000; "><font size="-1" color="#FF0000">BBC</font></span>']
variableslide[1]=['/LeadPhoto/LP--newsimg.jpg', '', '<span class="vertical" style="font-family:Verdana; color:#FF0000; "><font size="-1" color="#FF0000">ABC News</font></span>']
</Script>

Rajesh Dalmia

ASKER

hi TName

thanks for ur sample code, it is somewhat working, have a look at http://www.middle-east-monitor.com/indexVer.asp.
But problem is that becuase of the <br> after each char a gap is coming which is making the text very long, is it possible to change the script so that it looks like http://www.middle-east-monitor.com/ (as per Ie view). becuase in this case the text is coming close enough and it does not taking much space

Rajesh Dalmia

ASKER

hi TName

i modified the code a bit and now it is working, thanks