- From: MURAKAMI Shinyu <murakami@antenna.co.jp>
- Date: Mon, 02 Mar 2009 04:53:12 +0900
- To: www-style@w3.org
- Cc: member-japanese-layout-en@w3.org
This proposal is about how to realize the basic concept of 'kihonhanmen'
(page's main area with format specification) described in the JLTF
requirements[1].
[1] Requirements of Japanese Text Layout W3C Editor's draft
http://www.w3.org/2007/02/japanese-layout/docs/aligned/japanese-layout-requirements-en.html
The Requirements says:
----------------------------------------------------------------------
2.2.1 Specification of Page Formats
The page format of a Japanese document is specified by:
- Firstly, preparing a template of the page format, which determines the
basic appearance of pages of the document;
- Then, specifying the details of actual page elements based on the templates.
----------------------------------------------------------------------
I think the @page rules correspond to the 'templates' in the Requirements.
/*** CSS Example ***/
/* @page rules define the page format templates */
@page {
...
}
@page :right {
...
}
@page :left {
...
}
@page TOC {
...
}
@page Index {
...
}
----------------------------------------------------------------------
2.2.3 Elements of Page Formats
The following are the basic elements of a page format.
a. Trim size and binding side (vertically set Japanese documents are
bound on the right-hand side, and horizontally set documents are bound
on the left-hand side.)
b. Principal text direction (vertical writing mode or horizontal writing mode).
c. Appearance of the kihonhanmen and its position relative to the trim size.
d. Appearance of running heads and page numbers, and their positions
relative to the trim size and kihonhanmen.
----------------------------------------------------------------------
I tried to write a CSS example with this manner.
/*** CSS Example ***/
@page {
size: B5; /* the trim size */
margin: auto; /* kihonhanmen (= page area) position relative
to the trim size (page box).
I'd like to center it using margin: auto */
}
and how to specify the appearance of the kihonhanmen...
----------------------------------------------------------------------
2.2.4 Elements of Kihon-hanmen
The kihonhanmen is the hanmen style designed as the basis of a book. The
following are the basic elements of the kihonhanmen.
a. Character size and typeface name
b. Text direction (vertical writing mode or horizontal writing mode)
c. Number of columns and column space when using multi-column format
d. Length of a line
e. Number of lines per page (number of lines per column when using
multi-column format)
f. Line gap
----------------------------------------------------------------------
I noticed that the @page context cannot have properties that specify the
basic elements of the kihonhanmen, so I tried to specify those at the
root element.
/*** CSS Example ***/
:root {
font-size: 9pt; /* Character size */
font-family: serif; /* typeface name */
writing-mode: lr-tb; /* Text direction: horizontal writing mode */
column-count: 2; /* Number of columns */
column-gap: 18pt; /* column space */
column-width: 22em; /* Length of a line
(number of fullwidth characters per line) */
line-height: 15pt; /* Line gap + font-size */
height: calc(41 * 15pt); /* number of lines per column (41 lines) */
}
Problem
=======
I'd like to define the kihonhanmen (page area) size using fixed
column-width with em unit because the line length should be defined as a
whole number of fullwidth characters in standard Japanese layout.
But it is not possible in the current CSS spec and the above example
does not work because:
- The actual column-width is flexible unless the available width is unknown.
(see css3-multicol spec http://dev.w3.org/csswg/css3-multicol/)
- The 'height' specified on the root is not the height of the page area.
- '@page {margin: auto}' cannot center the page area.
Proposal
========
1. Allow page margin's auto value to center or align to one side.
2. Define @main rule inside the @page rule. The @main rule can have
properties that specify the appearance of the kihonhanmen (= page 'main'
area).
3. Inheritable properties (e.g. writing-mode and font-size) specified on
the @main rule can be inherited to the page content as if they were
specified on the root element.
/*** Example 1. (vertical-text, single-column) ***/
@page {
size: A5; /* 148mm * 210mm */
margin: auto; /* margin-top and margin-'outside' is auto */
margin-bottom: 21mm;
@main {
writing-mode: tb-rl;
font-size: 9pt;
line-height: 18pt;
height: 52em; /* 52 fullwidth characters per line */
width: calc(17 * 18pt); /* 17 lines per page */
}
}
@page:left { margin-right: 21mm } /* margin-'inside' is specified */
@page:right { margin-left: 21mm }
The actual values of page margins are:
margin-top = page-height(210mm) - margin-bottom(21mm) - height(52em=468pt=165.1mm) = 23.9mm;
margin-'outside' = page-width(148mm) - margin-'inside'(21mm) - width(17*18pt=306pt=108mm) = 19mm;
/*** Example 2. (vertical-text, multi-column) */
@page {
size: A5; /* 148mm * 210mm */
margin: auto; /* center horizontally and vertically */
@main {
writing-mode: tb-rl;
font-size: 9pt;
line-height: 16pt;
column-count: 2;
column-gap: 18pt;
column-width: 25em; /* 25 fullwidth characters per line */
width: calc(19 * 16pt); /* 19 lines per column */
}
}
The actual values of height and page margins are:
height = (column-count * column-width) + ((column-count - 1 ) * column-gap)
= (2 * 25em(=225pt)) + ((2 - 1) * 18pt = 468pt = 165.1mm;
margin-top = margin-bottom = (page-height(210mm) - height(165.1mm)) / 2 = 22.45mm;
margin-'outside' = page-width(148mm) - margin-'inside'(21mm) - width(17*18pt=306pt=107.95mm) = 19.05mm;
/*** Example 3. (horizontal-text, multi-column) ***/
@page {
size: 182mm 257mm; /* JIS B5 */
margin: auto; /* center horizontally */
marign-top: 21mm;
@main {
writing-mode: lr-tb;
font-size: 9pt;
line-height: 15pt;
column-count: 2;
column-gap: 18pt;
column-width: 22em; /* 22 fullwidth characters per line */
height: calc(41 * 15pt); /* 41 lines per column */
}
}
The actual values of width and page margins are:
width = (column-count * column-width) + ((column-count - 1 ) * column-gap)
= (2 * 22em(=198pt)) + ((2 - 1) * 18pt = 414pt = 146.05mm;
margin-left = margin-right = (page-width(182mm) - width(146.05mm)) / 2 = 17.975mm;
margin-bottom = page-height(257mm) - margin-top(21mm) - height(41*15pt=615pt=216.96mm) = 19.04mm;
/*** Example 4. (a hybrid example) ***/
@page { /* vertical-text, single-column */
size: A5;
margin: auto;
@main {
writing-mode: tb-rl;
font-size: 9pt;
line-height: 18pt;
height: 48em;
width: calc(17 * 18pt);
}
}
@page Index { /* horizontal-text, multi-column */
margin: 22mm 20mm;
@main {
writing-mode: lr-tb;
font-size: 8pt;
line-height: 14pt;
column-count: 3;
column-gap: 16pt;
column-width: auto;
width: auto;
height: auto;
}
/* fixed page margins and auto width/height are also possible */
}
I hope this will be discussed in the Tokyo F2F meeting.
Best regards,
--
Shinyu Murakami
http://www.antennahouse.com
Antenna House Formatter
http://www.antenna.co.jp/AHF/en/
Received on Sunday, 1 March 2009 19:54:01 UTC