| home / programming / corecss / 1 |    [previous] [next] |
|
|
|
Listing 11-4 layout-grid-type Sample Code
<html>
<head>
<title>layout-grid-type Example</title>
</head>
<style>
div {font-family: PMingLiU; layout-grid-mode: both; layout-flow: vertical-ideographic; font-weight: bold; font-size: 15pt}
</style>
<body>
<code>layout-grid-type: loose</code>
<div style="layout-grid-type: loose">
你可將你要兢投的貨物加註成"特寫項目"，或"特別要求項目"。所有"特寫項目"或"特別要求項目"均會得到特別處理
。例如：它們會被放置在兢投網頁的首頁、及在其他網頁上用加
粗字體顯示。加註費用為每項美元五十元。
</div>
<code>layout-grid-type: strict</code>
<div style="layout-grid-type: strict">
你可將你要兢投的貨物加註成"特寫項目"，或"特別要求項目"。所有"特寫項目"或"特別要求項目"均會得到特別處理
。例如：它們會被放置在兢投網頁的首頁、及在其他網頁上用加
粗字體顯示。加註費用為每項美元五十元。
</div>
</body>
</html>
layout-grid-line and layout-grid-char properties
share a common purpose: they are there to help the Web author set the dimensions
of the grid that the characters will be displayed upon. Too low a value, and the
characters will begin to merge together, too high and you end up wasting space.
The layout-grid-line is used to set the distance between vertical
lines of characters, while layout-grid-char sets the spacing value
for the character values contained within the line. The rough equivalent for each
property in Western terms would be line-height and letter-spacing
respectively, except that we are talking about characters displayed vertically
rather than horizontally.
Both properties can take the same types of values, consisting of any one of
four properties: none (the default), auto (an optimal
value determined by the browser), a measurement value or a percentage value.
The best way to explain these properties is to look at their effects. Listing
11-5 shows two samples of Chinese text -- the first without any layout-grid-line
value set and the second set to a relatively wide value. Its results can be
seen in Figure 11-6.
layout-grid-line Sample Code
<html>
<head>
<title>layout-grid-line 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-line</code> value set (<code>font-size</code> set to 15pt)
<div>
你可將你要兢投的貨物加註成"特寫項目"，或"特別要求項目"。所有"特寫項目"或"特別要求項目"均會得到特別處理
。例如：它們會被放置在兢投網頁的首頁、及在其他網頁上用加
粗字體顯示。加註費用為每項美元五十元。
</div>
Same Chinese set to <code>layout-grid-line: 25pt</code>
<div style="layout-grid-line: 25pt">
你可將你要兢投的貨物加註成"特寫項目"，或"特別要求項目"。所有"特寫項目"或"特別要求項目"均會得到特別處理
。例如：它們會被放置在兢投網頁的首頁、及在其他網頁上用加
粗字體顯示。加註費用為每項美元五十元。
</div>
</body>
</html>
layout-grid-line
As you can plainly see from Figure 11-6, layout-grid-line spaces
the lines of characters out on the page. Using this property you can more easily
control how much content is used to "fill-up" a page, by essentially adding
padding between the lines of characters.
Be careful when using the percentage value with layout-grid-line,
as it is applied relative to the height of the line. A setting of layout-grid-line:
0% equals the regular default value, whereas a value of layout-grid-line:
100% will space each and every line of characters by their height. Don't
use large percentage values unless you want to give your readers some practice
using the horizontal scrollbar in order to view all of the text on your page.
Also, it should be noted that layout-grid-line does not accept
negative values -- if you try, it will set the text to the default layout-grid-line
value.
As mentioned earlier, layout-grid-char works in roughly the same
way as the letter-spacing property for Western languages, though
in this case it sets a spacing value between vertical characters. It gives the
Web author greater control over the spacing of characters across the page. As
with the previous sample code, Listing 11-6 shows two samples of Chinese text
-- the first does not have a layout-grid-char value set and the
second is set to a relatively high value. Its results can be seen in Figure
11-7.
| 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
