| home / programming / corecss / 1 |    [previous] [next] |
|
|
|
lr-tb and
tb-rl values, there are four additional values: rl-tb,
tb-lr, bt-lr and bt-rl. The rl-tb
value flows the text from right-to-left, then top-to-bottom, a layout typical
for both Hebrew and Arabic text. The tb-lr value displays the text
from top-to-bottom, from left-to-right, which is as an alternate way of flowing
Chinese and Japanese text. The bt-lr value flows text from bottom-to-top
and then from left-to-right, a layout typical of the Mongolian language. Finally,
the bt-rl value flows text from bottom-to-top, from right-to-left.
There is no known writing system that actually uses a bottom-to-top, from right-to-left
layout, but it is included solely for consistency's sake. None of these other
values as yet work in Internet Explorer, but it is expected to when it fully adopts
the CSS3 values for this property. An illustration of how the CSS3 values for
writing-mode would be displayed can be seen in Figure 11-4, using
English text.
Figure 11-4: The intended effects of the CSS3 writing-mode values
on some sample text
Figure 11-4 does takes some liberties, most notably by displaying English text in various non-standard formats instead of using a horizontal, left-to-right layout we've seen, but this example is just to show how these text flows would work while still retaining some legibility for English readers. Keep in mind that as of Internet Explorer 6.0 (or any other browser of the same vintage) none of these other CSS3 values work.
line-height and letter-spacing or word-spacing,
which set how far apart lines of text should be from each other, and how those
individual characters and words should be separated from each other. Asian character
sets often use an explicit grid layout in which to set their characters, and the
layout-grid sub-family of properties is designed to accommodate Web
designers aiming to layout text in Asian languages.
The layout-grid sub-family of properties consists of four separate
main properties -- layout-grid-mode, layout-grid-type,
layout-grid-line and layout-grid-char -- as well as
the layout-grid shortcut property, which allows the user to set
various aspects of the main properties all at once. None of these properties
is typically used in isolation, as they are designed to be used together to
achieve a particular layout effect.
layout-grid-mode property is used to set the type of grid to
be employed, if any. It has four values: both, none,
line and char. The both value, which is
the default, enables both line and character grid types, and is designed primarily
for text that may contain both block and inline elements -- such as paragraph
and blockquote elements for example. The none value ensures that
no grid is present. The line value sets an element to only use a
line grid, which is the setting recommended for use with inline elements, like
blockquotes. The obverse of this value is the char value which sets
a character grid for an element, and this is recommended for block-level elements.
For the most part, it is likely that you'll want to defer to the default both
value, unless you want to set special formatting for any particular inline elements
that you want to have stand out.
layout-grid-type property controls the type of layout grid for
rendering an element's content. There are three different values for it: loose,
strict and fixed. loose is the default
value, and is the setting designed to be employed for Japanese and Korean character
sets. The strict value is designed for use for Chinese character
sets, as well as Japanese Genko characters. The fixed value is the
grid layout to be used when you want to display characters in a monospaced fashion,
where each character takes up the same amount of space as every other character.
Listing 11-4 uses the loose and the strict values for layout-grid-type
on the same piece of Chinese text, the easier to see the difference it makes.
You can see the results of this in Figure 11-5.
Though the difference between the two texts is subtle, it can be discerned
in Figure 11-5. The initial block of Chinese text is set to loose,
and the second to strict. With the strict setting,
on average there are more characters contained within each vertical line. This
is because only the ideographs, kanas and wide characters are snapped to the
layout grid under the strict setting, and it also disables normal
text justification -- hence you tend to get more characters displayed in each
vertical line.
With the loose setting, a constant width value is used on each
character -- so wide characters are narrowed, and narrow characters are widened
slightly. The end result tends to be less characters per vertical line. The
fixed value rigidly constrains all of the characters to fit into
the same space, any justification is turned off.
| 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
