| home / programming / corecss / 1 |    [previous][next] |
|
|
|
<html>
<head>
<title>layout-flow Example 2</title>
</head>
<style>
span.chinese {font-family: ËÎÌå,MingLiU; font-weight: bold; font-size: 35pt}
span.english {font-family: arial; font-weight: bold; font-size: 35pt}
span.english-horizontal {font-family: arial; font-weight: bold; font-size: 35pt; layout-flow: horizontal}
</style>
<body>
<div style="layout-flow: vertical-ideographic">
<span class="chinese" lang="zh-tw">
歡迎漫游</span>
<span class="english">PanelX –</span>
<span class="chinese">
平面顯示屏業界的</span>
<span class="english">Portal </span>
<span class="chinese">及</span>
<span class="english">Exchange</span>
</div>
<hr />
<div style="layout-flow: vertical-ideographic">
<span class="chinese" lang="zh-tw">
歡迎漫游</span>
<span class="english-horizontal">PanelX –</span>
<span class="chinese">
平面顯示屏業界的</span>
<span class="english-horizontal">Portal </span>
<span class="chinese">及</span>
<span class="english-horizontal">Exchange</span>
</div>
</body>
</html>
Figure 11-2: Combined Chinese and English text displayed first in vertical format,
and then in a combined vertical and horizontal formats
As you can see from Figure 11-2, the English text is rendered in horizontal format, but is still contained within the vertical format of the Chinese characters on the page. This does not simply rotate the English characters 90 degrees counterclockwise as you might expect, but renders the whole English word horizontal. Depending on your needs, you may find that the text layout is "too wide" when rendered in this manner, but it is worth knowing that it is available.
The layout-flow property sets the height of each vertical column
automatically, dependant on the amount of content to be displayed. This can
be overridden using the height property set to a specific value.
All text that exceeds the selected value overflows into the following left column
of characters.
Even though this is an addition first introduced in Internet Explorer 5.5,
by version 6.0 of the browser this property has been deprecated by Microsoft
in favor of the writing-mode property.
writing-mode property was first introduced in a beta version
of Internet Explorer 5.5, and has since become the favored way for handling the
flow of non-Western character sets on a Web page. This is due to the fact that
an expanded version of the writing-mode property has been incorporated
into the CSS3 specification, and clearly sets the way in which text layout for
different language sets is going to be accomplished in future standards-compatible
browsers.
Like the layout-flow property, at the moment writing-mode
has two working values which equate roughly with the text layout styles for
Western and Asian languages. The default value is lr-tb, which
stands for "left-to-right, top-to-bottom", and equates with Western styles of
text layout. The other value is tb-rl, which stands for "top-to-bottom,
right-to-left", which is the setting to be used for Asian languages. At first,
this wouldn't seem to be radically different from the layout-flow
property, and in fact, it isn't -- the two properties are functionally equivalent.
Like layout-flow, writing-mode does not rotate English
or other Western letters back to their proper orientation automatically, a point
which is illustrated in Figure 11-3, which compares equivalent code for layout-flow
against writing-mode, as depicted in Listing 11-3.
Listing 11-3 layout-flow versus writing-mode
<html>
<head>
<title>writing-mode Example</title>
</head>
<style>
span.chinese {font-family: ËÎÌå,MingLiU; font-weight: bold; font-size: 34pt}
span.english-horizontal-lf {font-family: arial; font-weight: bold; font-size: 34pt; layout-flow: horizontal}
span.english-horizontal-wm {font-family: arial; font-weight: bold; font-size: 34pt; writing-mode: lr-tb}
</style>
<body>
<strong>Using <code>layout-flow</code></strong>
<div style="layout-flow: vertical-ideographic">
<span class="chinese">
歡迎漫游</span>
<span class="english-horizontal-lf">PanelX –</span>
<span class="chinese">
平面顯示屏業界的</span>
<span class="english-horizontal-lf">Portal </span>
<span class="chinese">及</span>
<span class="english-horizontal-lf">Exchange</span>
</div>
<hr />
<strong>Using <code>writing-mode</code></strong>
<div style="writing-mode: tb-rl">
<span class="chinese">
歡迎漫游</span>
<span class="english-horizontal-wm">PanelX –</span>
<span class="chinese">
平面顯示屏業界的</span>
<span class="english-horizontal-wm">Portal </span>
<span class="chinese">及</span>
<span class="english-horizontal-wm">Exchange</span>
</div>
</body>
</html>
layout-flow versus writing-mode;
they are functionally equivalent
| home / programming / corecss / 1 | [previous][next] |
Jupitermedia Corporation has two divisions: Jupiterimages and JupiterOnlineMedia
Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Tech Jobs | Shopping | E-mail Offers
Created: March 27, 2003
Revised: August 19, 2003
URL: http://webreference.com/programming/corecss/1
