Vertical Text

This section contains css codes and other related material.

Vertical Text

Postby MT Shahzad on March 11th, 2008, 5:41 pm

Among other new layout elements, Internet Explorer 5.5 has introduced the writing-mode CSS element. With it, you can cause text to be rendered vertically in the browser window. The writing-mode property has two valid values at this time: "lr-tb" and "tb-rl". The first represents text that flows from left to right and then from top to bottom. This is the standard layout that you're used to seeing on the Web. The second represents top to bottom, right to left. For many languages, such as Chinese and Japanese, this is the preferred textual orientation. But you can use this layout format for English as well. Try this, for example:

Code: Select all
<div style="writing-mode:tb-rl;width:100%;height:100%">
This is an example of vertical layout!
</div>


One important note: for whatever reason, the <body> of an HTML document can't be set to render vertically; you can only render individual constituents of the page, such as <p>, <span>, and <div> elements vertically. This is why we set the width and height to 100% in the example; this effectively sets the <div> to occupy the entire browser window.
MT Shahzad
Web/Software Developer
http://mts.sw3solutions.com
User avatar
MT Shahzad
Site Admin
 
Posts: 300
Joined: February 29th, 2008, 8:11 am
Location: Muridke, Pakistan

Return to CSS - Cascading Style Sheet

Who is online

Users browsing this forum: No registered users and 0 guests

cron