CSS3 and tategaki : More effects
October 14th, 2005
My previous post showed that tategaki-style writing was possible with CSS3. What it didn’t do was show the impact on other elements.
In my previous post on the subject, I showed the bare minimum to get a decent vertical writing layout in the Firefox 1.5 betas:
[-moz-]column-width: 0.5em;
[-moz-]column-gap: 1.5em;
direction: rtl;
Using these is enough - but a full test of CSS3 would require more styling, and mre then text as content. Now, how would it react to the following?
- images
- floated images
- line breaks
- horizontal rules
- floats with a ‘clear’ specified
- bounding boxes with no dimentions set
First, though, I like to point out why I used column-width: 0.5em;. The issue is one of the font, in this case: standard fonts versus fixed width fonts. Japanese is supposed to be fixed width - kanji and kana should occupy the same space horizontally, except for half-width katakana.
Most japanese fonts (MS Mincho, Osaka, and other traditionals) Do the same thing for all their characters. However, others (Arial Unicode, Mikachan) are kinder to their latin characters by not making them fixed width. Which is why they can break a column-width: 1em;.
Inline Images
No idea what to expect. I have seen no expamples with CSS3 columns.
Floated Images
Expect normal wrapping.
line breaks
Expect a new column to be started immediately.
horizontal rules
Either a vertical rule + line break, or a one character wide line break.
floats with a ‘clear’ specified
Break up of the whole paragraph. Not sure how wrapping will be effected.
bounding boxes with no dimentions set
Fill up the width of the page first, growing taller as needed to accommodate text.
Firefox 1.5beta+ users can Look at the results. Note: The column CSS in this test varies slightly to show the result of “ideal settings”.
-Sud.
Posted in Technical |