W3C home > Mailing lists > Public > www-style@w3.org > April 2010

[css3-text-layout] writing-mode issues and requests

From: MURAKAMI Shinyu <murakami@antenna.co.jp>
Date: Thu, 08 Apr 2010 18:34:47 +0900
To: www-style@w3.org
Message-Id: <20100408183447.539A.C598BCD7@antenna.co.jp>

Japan Electronic Publishing Association (JEPA) published the
Minimal Requirements on EPUB for Japanese Text Layout:
adopted in the IDPF's EPUB 2.1 Working Group Charter - DRAFT 0.8 4/6/10:

Vertical writing mode is important for Japanese ebook publishers and
The current EPUB spec uses only CSS2, but the next version probably will
use the writing-mode property defined in the CSS3 Text Layout draft.
Now there are EPUB viewers already have implemented vertical writing
mode, i.e., "writing-mode: tb-rl":

ACCESS NetFront Book Viewer EPUB Edition

eBook Technologies EPUB Technology

It's obvious the CSS3 Text Layout is essential but currently we have 
only Editor's Draft, not yet working draft, it'a problem.

And there are serious problem to use the writing-mode property.
I posted about this,

Feature queries (was Proposal: writing-mode media feature)

This problem is also described in the Minimal Requirements on EPUB for 
Japanese Text Layout, Section 2.5:

| R5: It should be possible to provide stylesheets for both principal 
| text directions. This requirement does not necessarily mean that the 
| same stylesheet can be used for both directions. 
| Unfortunately, the design of CSS makes it difficult to meet this 
| requirement. This is because "top", "bottom", "right", and "left" in 
| CSS2 are not relative to the principal text direction (see the section 
| Interaction with Other CSS Attributes in Using Vertical Layout in 
| Internet Explorer 5.5). A stylesheet intended for vertical writing 
| provides miserable results for horizontal writing.
| Note: An html page at 
| http://www.asahi-net.or.jp/%7Eeb2m-mrt/epub/tategakiTest.html looks 
| good if the browser supports vertical writing, but it looks miserable, 
| otherwise.

We need the feature query functionality and also need to improve the 
CSS3 Text Layout and related specs.
I would like to summarize issues and requests.

Fix the name of the block-progression property
I support the name "block-progression", it is used in other W3C documents
and implemented in MSIE (with -ms- prefix) and Antenna House Formatter.

Writing-mode relative properties
There have been requested writing-mode relative properties like
margin-start, margin-end, margin-before and margin-after.

Mozilla and WebKit already have *-start and *-end properties and 
Antenna House has *-start/end/before/after (with vendor prefix).
We should standardize these writing-mode relative (= logical)

The cascading problem between logical and corresponding physical 
properties can be solved.

In Antenna House's implementation, the logical properties are treated 
as conditional aliases of corresponding physical properties.
Mozilla and WebKit seem doing same thing.

The mapping of logical and physical properties in major writing modes
is as following:

logical         physical (lr-tb)  physical (rl-tb)  physical (tb-rl)
-------------   ----------------  ----------------  ----------------
margin-start    margin-left       margin-right      margin-top
margin-end      margin-right      margin-left       margin-bottom
margin-before   margin-top        margin-top        margin-right
margin-after    margin-bottom     margin-bottom     margin-left

padding-start/end/before/after and border-start/end/before/after-*
will be defined likewise.

We need also logical width and height properties.

logical             physical (*-tb)  physical (tb-*)
------------------  ---------------  ----------------
logical-width       width            height
logical-height      height           width
min-logical-width   min-width        min-height
min-logical-height  min-height       min-width
max-logical-width   max-width        max-height
max-logical-height  max-height       max-width


  h1 {
    border-before: 2px solid;
    border-after:  2px solid;

  blockquote {
    margin-start: 2em;
    margin-end:   2em;

These styles can be used with both horizontal and vertical writing modes.

When both logical and physical properties are specified on same element,
normal cascading rules should be applied.

Specified logical properties are treated as if corresponding physical
properties are specified. Before this process, the writing mode has to 
be determined.


  div.test1 {
    margin-top:    2cm;
    margin-before: 5cm;   /* same as mrgin-right:5cm */
    writing-mode:  tb-rl; /* this is vertical writing mode */

  div.test2 {
    writing-mode: tb-rl;
    margin-top:   2cm;
    margin-start: 5cm; /* same as mrgin-top:5cm and overrides above */

  div.test3 {
    writing-mode: tb-rl;
    margin-start: 2cm; /* same as mrgin-top:2cm and be overridden */
    margin-top:   5cm;

Writing-mode relative property values

CSS3 Text defines "start" and "end" values of the text-align property.

| start
|     The inline contents are aligned to the start edge of the line box. 
| end
|     The inline contents are aligned to the end edge of the line box. 

That's fine. Other properties, e.g., "clear" and "float", should also use
these values.

For CSS3 GCPM's page floats, we need also "before" and "after" values.


  img.test1 {
    float: top; /* in horizontal writing mode,
                   floated to the beginning of page,
                   but when vertical writing mode,
                   floated to the beginning of line */

  img.test2 {
    float: start; /* always floated to the beginning of line */

:writing-mode() pseudo-class selector

The writing-mode relative properties and values will simplify
stylesheets for mixed writing mode documents, but it will be 
insufficient because sometimes we want different styles for
different writing modes.

We need a new pseudo-class that represents the writing-mode.

I propose the following syntax:


  <writing-mode>:  lr-tb | rl-tb | tb-rl | bt-rl | tb-lr | bt-lr
  (same as the writing-mode property value)


  blockquote:writing-mode(tb-rl) {
    margin: 2em 0 0 0; /* blockquote in Japanese vertical writing,
                          margin-top (= margin-start) : 2em */
  blockquote:writing-mode(lr-tb) {
    margin: 1em 3em;   /* blockquote in horizontal writing */

It may be useful to allow multiple writing-mode values and/or wildcards
as the following:

  span:writing-mode(rl-tb, bt-*) {
    background-color: yellow; /* highlight RTL or BTT spans */

I hope these requests will be discussed and refined to be incorporated
to the CSS3 spec.

Best regards,

ζ‘δΈŠ ηœŸι›„ (MURAKAMI Shinyu)
Antenna House Formatter:
Received on Thursday, 8 April 2010 09:35:20 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:07:45 UTC