CSS: current status and future directions for global languages

for EPUB EGLS Sapporo F2F

MURAKAMI Shinyu (Antenna House, W3C CSSWG)

General

What is CSS2.1 and when will it be completed?

History of CSS Level 2

What is CSS3 and when will each module is expected to be completed?

The following CSS3 modules already have reached the Candidate Recommendation stage (almost finished):

But many other modules are far from finished...

W3C Process

Editor's Draft → Working Drafts → Candidate Recommendation → Proposed Recommendation → Recommendation
Candidate Recommendation (CR)
  • Call for Implementations
  • CR exit criteria: There must be at least two independent, interoperable implementations of each feature, passing the respective test cases in the official CSS test suite.
  • There was no CR stage when CSS2 REC (1998) was published.
Proposed Recommendation (PR)
  • Call for Review to the Advisory Committee for final endorsement.

Why is CSS development so slow?

Overview of CSS3 modules: which one is relevant to EGLS?

CSS3 Text Layout

CSS3 Text Layout describes the properties that control text direction.

Schedule: First Public Working Draft will be published on October 2010

Problems with the CSS3 Text Layout 'writing-mode' property

horizontal writing mode vertical writing mode 
h1 {
  border-left: 12pt solid;
  margin-bottom: 12pt;
}
blockquote {
  margin-left: 3em;
}
 
h1 {
  border-top: 12pt solid;
  margin-left: 12pt;
}
blockquote {
  margin-top: 3em;
}
vertical writing mode if vertical writing mode is not supported 
h1 {
  border-top: 12pt solid;
  margin-left: 12pt;
}
blockquote {
  margin-top: 3em;
}
 A style sheet intended for vertical writing mode provides miserable results for horizontal writing mode.

Requirements for Writing Mode Switching

E-book viewers supporting vertical writing often have the writing mode switching feature. See such example, Lovely Reader's screen shots:

We expect e-books intended for vertical writing mode work reasonably with horizontal. Note that many viewers only support horizontal writing.

Proposals for Dealing with Writing Mode Switching

There are several proposals for dealing with writing mode switching.

[Proposals for Dealing with Writing Mode Switching]
Use alternate style sheets for both writing modes

Style sheets:

/* horizontal.css */

html { writing-mode: lr-tb }
h1 {
  border-left: 12pt solid;
  margin-bottom: 12pt;
}
blockquote {
  margin-left: 3em;
}
...
 
/* vertical.css */

html { writing-mode: tb-rl }
h1 {
  border-top: 12pt solid;
  margin-left: 12pt;
}
blockquote {
  margin-top: 3em;
}
...

(X)HTML:

<link rel="stylesheet" href="horizontal.css"
        type="text/css" title="Horizontal"/>
<link rel="alternate stylesheet" href="vertical.css"
        type="text/css" title="Vertical"/>

Advantages of using alternate style sheets for both writing modes

Disadvantages

[Proposals for Dealing with Writing Mode Switching]
Pseudo class selectors: :ltr, :rtl, and :ttb

:ltr
horizontal writing is supported and @dir has been set to 'ltr'
:rtl
horizontal writing is supported and @dir has been set to 'rtl'
:ttb
vertical writing is supported and the initial value of 'writing-mode' is 'tb-rl'

Here @dir is the 'dir' attribute in (X)HTML. In this proposal, the initial value of the 'writing-mode' property can be set by user preference.

Example:

blockquote:ltr {
  margin-left: 3em;
}
blockquote:rtl {
  margin-right: 3em;
}
blockquote:ttb {
  margin-top: 3em;
}

Advantages of the :ltr/rtl/ttb pseudo classes proposal

Disadvantages

[Proposals for Dealing with Writing Mode Switching]
Add a Media Query: @media (vertical-text)

Example:

h1 {
  border-left: 12pt solid;
  margin-bottom: 12pt;
}
blockquote {
  margin-left: 3em;
}
...
@media (vertical-text) {
  /* if vertical writing is supported: */
  html { writing-mode: tb-rl }
  h1 {
    border-left: none; border-top: 12pt solid;
    margin-bottom: 0; margin-left: 12pt;
  }
  blockquote {
    margin-left: 0; margin-top: 3em;
  }
  ...
}

Advantages of the vertical-text Media Query proposal

Disadvantages

[Proposals for Dealing with Writing Mode Switching]
Logical properties: margin-before/after/start/end, etc.

writing-mode: lr-tb writing-mode: tb-rl
↑before=top
←
start
=left→
end
=right
↓after=bottom
↑start=top
←
after
=left→
before
=right
↓end=bottom
 
h1 {
  border-start: 12pt solid;
  margin-after: 12pt;
}
blockquote {
  margin-start: 3em;
}
 Same margin/border/padding properties can be used for both writing modes.

Advantages of the logical properties proposal

Disadvantages

[Proposals for Dealing with Writing Mode Switching]
Directional-mode switch (physical/logical): in logical directional-mode, treat 'top' as the 'before' side

horizontal writing mode vertical writing mode, logical
↑top (before)
←
left
(start)→
right
(end)
↓bottom (after)
↑left (start)
←
bottom
(after)→
top
(before)
↓right (end)
 
h1 {
  border-left: 12pt solid;
  margin-bottom: 12pt;
}
blockquote {
  margin-left: 3em;
}
 Same properties can be used for both writing modes. In vertical writing mode with 'directional-mode: logical', the directions are rotated 90deg.

Advantages of the directional-mode switch proposal

Disadvantages

[Proposals for Dealing with Writing Mode Switching]
Change directional definitions: treat 'top' as always the 'before' side.

horizontal writing mode vertical writing mode
↑top (before)
←
left
(start)→
right
(end)
↓bottom (after)
↑left (start)
←
bottom
(after)→
top
(before)
↓right (end)
 
h1 {
  border-left: 12pt solid;
  margin-bottom: 12pt;
}
blockquote {
  margin-left: 3em;
}
 Same properties can be used for both writing modes. In vertical writing mode, the directions are rotated 90deg.

Advantages of the changing directional definitions proposal

Disadvantages

CSS3 Text

CSS3 Text has been severely revised since it was reverted to a working draft from 2003 CSS3 Text CR. Many sections intended for this module are not yet represented in the current draft. The spec is far from finished.

Options: Should EPUB adopt CSS3 features?

[Options: Should EPUB adopt CSS3 features?]
Add 'text-direction' and 'page-progression-direction' attributes in OPF

Advantages: It can avoid using unfinished CSS3 properties; The viewer can determine directions without accessing CSS files.

'text-direction' attribute

Value: auto | ltr | rtl | ttb-rtl | ttb-ltr
Default: auto (both ltr and ttb-rtl are possible)

'page-progression-direction' attribute

Value: auto | ltr | rtl
Default: auto (depends on 'text-direction')

These attributes should be able to specify for the whole book and for individual OPS content documents.

How to specify Horizontal in Vertical text

The followings are proposals for specifying horizontal text within vertical text layout:

Proposal: Use XHTML 'dir' attribute. Treat elements with dir="ltr" or dir="rtl" in vertical text mode as horizontal text.

e.g., 縦中横<span dir="ltr">22</span>年
<table dir="ltr">...

Another proposal: Define a class name for specifying horizontal in vertical text

e.g., 縦中横<span class="idpf-horizontal">22</span>年
<table class="idpf-horizontal">...

[Options: Should EPUB adopt CSS3 features?]
Define class names for emphasis marks

e.g. <em class="idpf-sesame-dot">圏点つきのテキスト</em>

Aozora Bunko's XHTML uses this way.
See: http://kumihan.aozora.gr.jp/emphasis.html

Predefined class names for emphasis marks:

Ruby - XHTML simple ruby or HTML5 ruby?

The Ruby Annotation (XHTML Ruby) spec will be replaced by (X)HTML5.

XHTML simple ruby
<ruby><rb>漢字</rb><rp>(</rp><rt>かんじ</rt><rp>)</rp></ruby>
XHTML5 ruby
<ruby>漢<rt>かん</rt>字<rt>じ</rt></ruby>

A transitional solution:

Thanks