spacer
Yehuda Shiran August 14, 2000
Text Rotation within an Object
Tips: August 2000

Yehuda Shiran, Ph.D.
Doc JavaScript

Developer News
Microsoft Shows Off Silverlight 4, IE9 Plans
Metasploit Expands Vulnerability Test Framework
HyperCard Reborn?

Starting from Internet Explorer 5.5, you can set and retrieve the direction and flow of the content in the object. The direction may be either top-to-bottom or left-to-right. The flow may be either top-to-bottom or right-to-left. There are two possible combinations: direction is left-to-right and flow is top-to-bottom, or direction is top-to-bottom and flow is right-to-left. These two options are abbreviated to "lr-tb" and "tb-rl". You can retrieve this property as:

object.style.writingMode 

and set it as:

object.style.writingMode = sFlowDir;

where sFlowDir can be one of the following:

ValueEffect
lr-tbContent flows from left to right and from top to bottom. The next horizontal line will be placed underneath the current one. All glyphs are positioned upright. The default.

tb-rlContent flows from top to bottom and from right to left. The next vertical line is positioned to the left of the current line. Wide-cell glyphs are positioned upright; nonwide-cell glyphs — also known as narrow Latin or narrow Kana glyphs — are rotated 90-degrees clockwise.

Although the "tb-rl" style is mostly used in Asian typography, you can also use it to place English typography on its "side", similarly to how you see a book on a shelf. The following script implements a paragraph that the user can flip on its side by clicking the mouse anywhere on the page:

<DIV ID="test" STYLE="position:absolute">Click anywhere on the page to rotate me</DIV>
<SCRIPT LANGUAGE="JavaScript">
document.onclick = rotate;

function rotate() {
  if (test.style.writingMode == "lr-tb") {
    test.style.writingMode = "tb-rl";
  }
  else {
    test.style.writingMode = "lr-tb";
  }
}
</SCRIPT>

Here is the object:

Click anywhere on the page to rotate me

Click anywhere on the page and see how the text inside the object rotates 90 degrees each time.


People who read this tip also read these tips:

Look for similar tips by subject:

internet.commediabistro.comJusttechjobs.comGraphics.com

Search:

WebMediaBrands Corporate Info

Legal Notices, Licensing, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs

webref The latest from WebReference.com Browse >
Rolling Out Your Own HTML Application Version Control · HTML 5: Client-side Storage · Working with Ajax Server Extensions
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
Wi-Fi Product Watch, November 2009 · Chip Market Recovering From '08 Collapse · Low-Cost Tools to Kickstart Your New Business