| home / programming / corecss / 1 |    [previous] [next] |
|
|
|
Listing 11-6 layout-grid-char Sample Code
<html>
<head>
<title>layout-grid-char Example</title>
</head>
<style>
div {font-family: PMingLiU; layout-grid-mode: both; layout-flow: vertical-ideographic; font-weight: bold; font-size: 15pt}
</style>
<body>
Chinese text with no <code>layout-grid-char</code> value set (<code>font-size</code> set to 15pt)
<div>
你可將你要兢投的貨物加註成"特寫項目"，或"特別要求項目"。所有"特寫項目"或"特別要求項目"均會得到特別處理
。例如：它們會被放置在兢投網頁的首頁、及在其他網頁上用加
粗字體顯示。加註費用為每項美元五十元。
</div>
Same Chinese text set to <code>layout-grid-char: 15pt</code>
<div style="layout-grid-char: 15pt">
你可將你要兢投的貨物加註成"特寫項目"，或"特別要求項目"。所有"特寫項目"或"特別要求項目"均會得到特別處理
。例如：它們會被放置在兢投網頁的首頁、及在其他網頁上用加
粗字體顯示。加註費用為每項美元五十元。
</div>
</body>
</html>
layout-grid-char
Figure 11-7 shows the effects of layout-grid-char on our sample
of Chinese text -- the section to where it has been applied expands the spacing
between vertical characters, displaying five characters per line instead of
ten characters per line in the default sample. The way this setting works is
that it sets the spacing value between each character. So in the second example,
the layout-grid-char value is set to equal that of the font-size
of the Chinese characters, so it ends up placing half as many characters along
each vertical line, and twice as many lines are needed to display all of the
characters. Even though there is significant spacing between the characters
in the second example, the spacing of the lines remains the same -- there may
be more lines of characters, but layout-grid-char does not affect
the spacing between the lines of characters.
Same as with layout-grid-line, layout-grid-char
does not take negative values, and it must be applied to a block-level elements.
According to Microsoft's documentation, in order for these properties to work,
layout-grid-mode must be set to either line or both -- though in
our tests it did not matter if layout-grid-mode was present, as
the presence of layout-grid-line or layout-grid-char
seemed to be enough to do the trick.
layout-grid property is a shortcut property to all of the rest
of the layout-grid family of properties, and like all such shortcut
properties, it allows Web authors to quickly set multiple parameters at once.
The values must be placed in this order: first the layout-grid-mode
value, then layout-grid-type followed by layout-grid-line
and layout-grid-char. The default setting for layout-grid
is the default values for each of these individual properties in succession: both
loose none none.
Using this shortcut property you can easily and quickly make formatting changes
to sections or all of the Asian text on your Web pages. The default setting
for displaying such text on a Web page tends to be very compact, which can make
the characters hard to read, especially if the characters are rather small.
Using layout-grid you can make wholesales changes all at once.
Listing 11-7 shows some Japanese text, the first without any special layout-grid
settings, the second using layout-grid: both loose 10pt 5pt. The
results can be see in Figure 11-8.
Listing 11-7 layout-grid Sample Code
<html>
<head>
<title>layout-grid Example</title>
</head>
<style>
div {font-family: "MS Mincho"; layout-flow: vertical-ideographic; font-size: 15pt}
</style>
<body>
Unformatted Japanese text
<div>
はフラットパネルディスプ
レイ業界の独立したポータ
ルサイトで、電子取引サー
ビスを行っております。香
港、トロント（カナダ）、
ロンドン（イギリス）にあ
る私どものオフィスより、
アジア、ヨーロッパ、アメ
リカをカバーしております
。私どもは<b>グローバル</b>な
活動を行っており、また競
売は<b>匿名</b>としております
。私どもは皆様が世界中の
パートナーと匿名にてお取
引できるよう支援させてい
ただいております。
</div>
Same Japanese text using <code>layout-grid: both loose 10pt 5pt</code>
<div style="layout-grid: both loose 10pt 5pt">
はフラットパネルディスプ
レイ業界の独立したポータ
ルサイトで、電子取引サー
ビスを行っております。香
港、トロント（カナダ）、
ロンドン（イギリス）にあ
る私どものオフィスより、
アジア、ヨーロッパ、アメ
リカをカバーしております
。私どもは<b>グローバル</b>な
活動を行っており、また競
売は<b>匿名</b>としております
。私どもは皆様が世界中の
パートナーと匿名にてお取
引できるよう支援させてい
ただいております。
</div>
</body>
</html>
layout-grid
values set, the second using layout-grid: both loose 10pt 5pt
Here's what's going on in Figure 11-8: the both setting (which
is the equivalent to layout-grid-mode: both) ensures that the formatting
is added to both block-level as well as inline elements; loose
is the correct layout-grid-type value for Japanese text; the 10pt
value sets a 10-point spacing between each successive line, (equivalent to layout-grid-line:
10pt); and the 5pt value adds an equivalent spacing between
each individual character displayed (same as layout-grid-char: 5pt).
The end result as can be seen in Figure 11-8 not only shows the text more
spaced-out on the page, but it is arguably easier to make out individual characters,
and hence to read the text. Of course there are limits to this -- space the
text too widely on a page and you'll end up forcing your users to do a lot of
horizontal scrolling in order to read all of your text. But used judiciously,
layout-grid can enhance the overall readability of your text, and
display it more elegantly on the Web page.
| 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
