- From: MURAKAMI Shinyu <murakami@antenna.co.jp>
- Date: Thu, 08 Apr 2010 18:34:47 +0900
- To: www-style@w3.org
Hi,
Japan Electronic Publishing Association (JEPA) published the
Minimal Requirements on EPUB for Japanese Text Layout:
http://www.jepa.or.jp/press_release/reqEPUBJ.html
adopted in the IDPF's EPUB 2.1 Working Group Charter - DRAFT 0.8 4/6/10:
http://idpf.org/idpf_groups/IDPF-EPUB-WG-Charter-4-6-2010.html
Vertical writing mode is important for Japanese ebook publishers and
readers.
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
http://www.access-company.com/news/press/ACCESS/2009/20091221_1_epub.html
eBook Technologies EPUB Technology
http://www.ebooktechnologies.com/press_2009111101.htm
It's obvious the CSS3 Text Layout is essential but currently we have
only Editor's Draft, not yet working draft, it'a problem.
http://dev.w3.org/csswg/css3-text-layout/
And there are serious problem to use the writing-mode property.
I posted about this,
Feature queries (was Proposal: writing-mode media feature)
==========================================================
http://lists.w3.org/Archives/Public/www-style/2010Mar/thread.html#msg279
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
==============================================
http://dev.w3.org/csswg/css3-text-layout/#block-progression
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)
properties.
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
Examples:
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.
Examples:
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.
http://dev.w3.org/csswg/css3-text/#text-align
| 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.
http://dev.w3.org/csswg/css3-gcpm/#page-floats
Examples:
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(<writing-mode>)
<writing-mode>: lr-tb | rl-tb | tb-rl | bt-rl | tb-lr | bt-lr
(same as the writing-mode property value)
Examples:
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)
http://twitter.com/MurakamiShinyu
Antenna House Formatter:
http://www.antenna.co.jp/AHF/
http://www.antennahouse.com
Received on Thursday, 8 April 2010 09:35:20 UTC