August 14, 2000 - Text Rotation within an Object | WebReference

August 14, 2000 - Text Rotation within an Object

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

Yehuda Shiran, Ph.D.
Doc JavaScript

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.