286.txt

* 仕様書

[REFS[
- [44] [CITE@en[CSS Writing Modes Level 4]], [TIME[2020-09-05T23:08:25.000Z]], [TIME[2020-09-06T01:23:51.094Z]] <https://drafts.csswg.org/css-writing-modes/>
- [46] [CITE@en[CSS Writing Modes Level 4]], [TIME[2020-09-05T23:08:25.000Z]], [TIME[2020-09-06T01:54:08.790Z]] <https://drafts.csswg.org/css-writing-modes/#propdef-writing-mode>
]REFS]

* 配置モデル

[FIG(short list)[ [45] [[CSS Writing Modes]]
- [[行内基底方向]]
- [[ブロックフロー方向]]
]FIG]

* [CODE['writing-mode']]

[SRC[>>46]]

* 歴史

** DSSSL

[54] 
[[JIS X 4153:1998]] (ISO 1996)

- 4.17 [L[行進行方向 (line-progression-direction)]]
- 12.1 l) [L[機能 bidi]]: 「[L[表記方向左向き (right-to-left)]]」
- 12.1 m) [L[機能 vertical]]: 「[L[表記方法下向き (top-to-bottom)]]」
- 12.3.1 表記方法: 「[L[右向き (left-to-right), 左向き (right-to-left) 又は下向き (top-to-bottom) のいずれか]]」
- 12.3.2 「[L[段落が複数の表記モードを使う]]」 (横書き [[bidi]] のこと)
- いくつかの[[流し込みオブジェクト]]に[[特質]]
[CODE[writing-mode]]
があって、
[CODE[left-to-right]], [CODE[right-to-left]]
が指定でき、ものによっては
[CODE[top-to-bottom]]
も指定できる。
- 12.6.6 [CODE[implicit-bidi-method]]

** XSL

[REFS[
- [55] [CITE[Extensible Stylesheet Language (XSL)]], [TIME[2017-10-02T10:21:49.000Z]], [TIME[2020-10-25T10:03:32.593Z]] <https://www.w3.org/TR/1998/WD-xsl-19980818>
]REFS]

- [CODE[writing-mode]], [CODE[[VAR[*]]-writing-mode]]
-- block-progression-direction
-- inline-progression-direction
-- escapement-direction
-- line-progression-direction
-- row-progression-direction
-- column-progression-direction
-- shift-direction
-- up-direction
-- [VAR[writing-mode-specifier]]
--- [CODE[lr-tb]] ([[既定値]])
--- [CODE[rl-tb]]
--- [CODE[tb-rl]]
--- [CODE[lr-bt]]
--- [CODE[rl-bt]]
--- [CODE[tb-lr]]
--- [CODE[bt-lr]]
--- [CODE[bt-rl]]
--- [CODE[lr-alternating-rl-tb]]
--- [CODE[lr-alternating-rl-bt]]
--- [CODE[lr-inverting-rl-tb]]
--- [CODE[lr-inverting-rl-bt]]
--- [CODE[tb-rl-in-rl-pairs]]
-- starting-edge, ending-edge
- [CODE[method-implicit-bidi]]

[56] このとき導入されたモデルが基本的にそのまま踏襲されたようです。

[[XSL]] → [[XSL 1.0]] ([[XSL-FO]]) → [[XSL 1.1]]

- [57] [CITE[Extensible Stylesheet Language (XSL)]], [TIME[2017-10-02T10:21:49.000Z]], [TIME[2020-10-25T10:13:24.595Z]] <https://www.w3.org/TR/1998/WD-xsl-19981216>
-- [58] [CODE[writing-mode]] 関連はやや整理が進むが基本は同じ
-- [59] [[bidi]] は [[Unicode Bidirectional Algorithm]] に
-- [62] start-edge, end-edge, before-edge, after-edge など
-- [76] up-direction に関係して
[CODE[vertical-roman-orientation]] = [CODE[vertical]]/[CODE[perpendicular]]
というのが出てくる
<https://www.w3.org/TR/1998/WD-xsl-19981216#fm-up-direction>
が、定義なし。
- [60] [CITE[Extensible Stylesheet Language (XSL)]], [TIME[2017-10-02T11:00:35.000Z]], [TIME[2020-10-25T10:15:31.897Z]] <https://www.w3.org/TR/1999/WD-xsl-19990421/>
-- [61] [CODE[fo:bidi-override]]
-- [63] [[CSS]] との統合が本格的に始まる
-- [64] [CODE[i18n-format]] が指していたのはここ

[65] この少し前に 
[[Microsoft]]
が
[[CSS]]
の追加機能として
[CODE[i18n-format]]
を提案していました。
[[書字方向]]指定は
[CODE['[[layout-flow]]']]
を使っていました。
そちらは
[[XSL]]
との統合で廃止され、
その後は
[[CSS]]
も
[CODE[writing-mode]]
を採用しました。


- [66] [CITE[Extensible Stylesheet Language (XSL)]], [TIME[2017-10-02T10:23:25.000Z]], [TIME[2020-10-26T08:47:18.476Z]] <https://www.w3.org/TR/2000/WD-xsl-20000112/#writing-mode>
- [71] [CITE[Extensible Stylesheet Language (XSL)]], [TIME[2017-10-02T10:23:25.000Z]], [TIME[2020-10-26T08:56:33.865Z]] <https://www.w3.org/TR/2000/WD-xsl-20000112/#writing-mode-add>

[67] 前の WD (>>60) では全バリエーションが定義されていましたが、
この WD から本体[[規定]]と附属書に分離されました。

- [68] 本体 (既存): [CODE[lr-tb]], [CODE[rl-tb]], [CODE[tb-rl]]
- [69] 本体 (新): [CODE[lr]] (= [CODE[lr-tb]]), [CODE[rl]] (= [CODE[rl-tb]]),
[CODE[tb]] (= [CODE[tb-rl]])
- [72] 追加: その他の既存値

[73] 追加の値は、
「for more extensive internationalization support」 [SRC[>>71]]
のための追加の値だと説明されていました。

[70] 
選択の理由は
「covers the base writing-modes that are used as the official languages of the United Nations」
[SRC[>>66]]
と説明されました。 [[国際連合]]の[[公用語]]は
[[Arabic]], [[Chinese]], [[English]], [[French]], [[Russian]], [[Spanish]]
とされます。[[国際連合]]が[[書字方向]]まで定めているのか不明ですが、
この各言語はいずれも [CODE[lr-tb]], [CODE[rl-tb]]
が現代で正式に使われています。
([[Chinese]] が現[[国際連合]]加盟国である[[中華人民共和国]]の[[中文]]だとする場合。)
この理由付けからは [CODE[tb-rl]] が含まれた理由がよくわかりません。



[1] [[XSL 1.0]]

,値	,行内部品・文の進行	,ブロックの進行	,シフト方向
,[CODE(XSL)[lr-tb]] ([CODE(XSL)[lr]])	,→	,↓	,↑
,[CODE(XSL)[rl-tb]] ([CODE(XSL)[rl]])	,←	,↓	,↑
,[CODE(XSL)[lr-bt]]	,→	,↑	,↑
,[CODE(XSL)[rl-bt]]	,→	,↑	,↑
,[CODE(XSL)[lr-alternating-rl-bt]]	,→ (奇数) ← (偶数)	,↑	,↑
,[CODE(XSL)[lr-alternating-rl-tb]]	,→ (奇数) ← (偶数)	,↓	,↑
,[CODE(XSL)[lr-inverting-rl-bt]]	,→ (奇数) ← (偶数)	,↑	,↑ (奇数) ↓ (偶数)
,[CODE(XSL)[lr-inverting-rl-tb]]	,→ (奇数) ← (偶数)	,↓	,↑ (奇数) ↓ (偶数)
,[CODE(XSL)[tb-lr]]	,↓	,→	,←
,[CODE(XSL)[tb-rl]] ([CODE(XSL)[tb]])	,↓	,←	,→
,[CODE(XSL)[tb-lr-in-lr-pairs]]	,↓	,←	,→
,[CODE(XSL)[bt-lr]]	,↑	,→	,←
,[CODE(XSL)[bt-rl]]	,↑	,←	,→

''Formatting Properties 7.27.7 "writing-mode"'' <http://www.w3.org/TR/xsl/slice7.html#writing-mode>

''Internationalization A.1 Additional "writing-mode" values'' <http://www.w3.org/TR/xsl/sliceA.html#writing-mode-add>

- [2] 表で、シフト方向とは、[[基線]]類の調整方向。
- [3] 注意する必要があるのは [[Unicode]] の [[bidi]] 算法との関係 (横書き系の時に影響) と、[[グリフ]]の向きかな。


- [74] [CITE@EN[Extensible Stylesheet Language (XSL) Version 1.1]], [TIME[2017-10-02T10:31:36.000Z]], [TIME[2020-10-26T09:26:37.124Z]] <https://www.w3.org/TR/2006/CR-xsl11-20060220/#writing-mode>

[75] その後の [[XSL 1.0]] [[W3C勧告]]や [[XSL 1.1]] 案は附属書と分離された状態のままでしたが、
[[XSL 1.1]] の [[CR]] でなぜか本体に再統合されました。
その後の版では統合されたままで、
[[XSL 1.2]] の最期に至りました。




[4]
[[Firefox]] 2 は実装していません。
([[名無しさん]])

[5]
[[Opera]] 9 では [[SVG 1.1]] で定義されている値が使えます。
([[名無しさん]])

[6]
[[WinIE 6]] では [CODE(CSS)@en[[[lr-tb]]]] と
[CODE(CSS)@en[[[tb-rl]]]] が使えます。
([[名無しさん]])

[7]
テスト用
<http://suika.fam.cx/gate/2007/cssom/viewer?c=p%20%7B%0D%0A%20%20writing-mode%3A%20tb-rl%3B%0D%0A%7D%0D%0A;h=%3Cp%3E%3Cbutton%20type%3Dbutton%20onclick%3D%22%0D%0A%20%20w%20(getComputedStyle%20(this.parentNode%2C%20null).writingMode)%3B%0D%0A%22%3E%3Ccode%3EgetComputedStyle%3C%2Fcode%3E%3C%2Fbutton%3E%0D%0A%3Cp%3E%3Cbutton%20type%3Dbutton%20onclick%3D%22%0D%0A%20%20w%20(this.parentNode.currentStyle.writingMode)%3B%0D%0A%22%3E%3Ccode%3EcurrentStyle%3C%2Fcode%3E%3C%2Fbutton%3E;p=n;x=style-element;i=html-div>
([[名無しさん]])

[8]
[[WinIE 6]] には [[DOM属性]] [CODE(DOMa)@en[[[writingMode]]]]
があります。
([[名無しさん]])

[9]
>>8 [CODE(DOMa)@en[[[currentStyle]]]]
で得られるのは[[指定値]] = [[算出値]] = [[使用値]]のようです。
([[名無しさん]])

[10]
[[Opera]] 9 には [[DOM属性]]がないようです。
[CODE(DOMm)@en[[[getComputedStyle]]]] や
[CODE(DOMa)@en[[[currentStyle]]]] では
[[DOM属性]]もなく、
[CODE(DOMm)@en[[[getPropertyValue]]]] でも[[空文字列]]しか得られません。

[11] [CITE@ja[縦書きHTML/CSSに関するメモ - 血統の森 web実験小屋]] ([TIME[2009-02-02 01:40:26 +09:00]] 版) <http://momdo.s35.xrea.com/web-html-test/vertical-text/index.html>

**

[12] [CITE@en['''['''css3-text-layout''']''' writing-mode issues and requests]]
([[MURAKAMI Shinyu]] 著, [TIME[2010-04-08 18:34:47 +09:00]] 版)
<http://lists.w3.org/Archives/Public/www-style/2010Apr/0278.html>

[13] [CITE@en[CSS Writing Modes Module Level 3]]
( ([TIME[2011-02-02 05:10:15 +09:00]] 版))
<http://www.w3.org/TR/2011/WD-css3-writing-modes-20110201/>

[14] [CITE@en[CSS Writing Modes Module Level 3]]
( ([TIME[2011-04-28 23:05:20 +09:00]] 版))
<http://www.w3.org/TR/2011/WD-css3-writing-modes-20110428/>

[15] [CITE@en[CSS Writing Modes Module Level 3]]
( ([TIME[2011-05-31 22:58:14 +09:00]] 版))
<http://www.w3.org/TR/2011/WD-css3-writing-modes-20110531/>

[16] [CITE@en[CSS Writing Modes Module Level 3]]
( ([TIME[2011-08-31 20:20:00 +09:00]] 版))
<http://www.w3.org/TR/2011/WD-css3-writing-modes-20110901/>

[17] [CITE@en[CSS Writing Modes Module Level 3]]
( ([TIME[2012-05-01 07:23:33 +09:00]] 版))
<http://www.w3.org/TR/2012/WD-css3-writing-modes-20120501/>

[18] [CITE@en[CSS Writing Modes Module Level 3]]
( ([TIME[2012-11-15 23:15:29 +09:00]] 版))
<http://www.w3.org/TR/2012/WD-css3-writing-modes-20121115/>

[19] [[WinIE9]] は [CODE(CSS)@en[[[lr]]]], [CODE(CSS)@en[[[rl]]]], [CODE(CSS)@en[[[tb]]]],
[CODE(CSS)@en[[[lr-tb]]]], [CODE(CSS)@en[[[lr-bt]]]], [CODE(CSS)@en[[[rl-tb]]]], [CODE(CSS)@en[[[rl-bt]]]],
[CODE(CSS)@en[[[tb-lr]]]], [CODE(CSS)@en[[[rb-rl]]]], [CODE(CSS)@en[[[bt-lr]]]], [CODE(CSS)@en[[[bt-rl]]]]
に対応しています。 [CODE(CSS)@en[[[bt]]]] はなぜかありません。いずれも [[CSSOM]] 上のみならず[[レンダリング]]も変化します。

[20] [[Chrome]] は [CODE(CSS)@en[[[lr]]]], [CODE(CSS)@en[[[rl]]]], [CODE(CSS)@en[[[tb]]]],
[CODE(CSS)@en[[[lr-tb]]]], [CODE(CSS)@en[[[rl-tb]]]], [CODE(CSS)@en[[[rb-rl]]]] に対応しています。
[TIME[2013-09-07T02:21:18.00Z]]

[21] 現行 [[CSS3]] の [CODE(CSS)@en[[[horizontal-lr]]]], [CODE(CSS)@en[[[horizontal-rl]]]],
[CODE(CSS)@en[[[vertical-rl]]]] にはどのブラウザも対応していません。 [TIME[2013-09-07T02:21:51.400Z]]

[22] [[IE9]] は [CODE(CSS)@en[[[-ms-writing-mode]]]] を構文解析時に [CODE(CSS)@en[[[writing-mode]]]]
に置き換えるようです。 [CODE(CSS)@en[[[-ms-writing-mode]]]] の方には [[IDL属性]]は無いようです。

[23] [CITE[Text — SVG 2]]
( ([TIME[2013-06-13 22:56:31 +09:00]] 版))
<https://svgwg.org/svg2-draft/text.html#WritingModeProperty>

[24] [CITE@ja[日本語組版処理の要件(日本語版)]]
( ([[Japanese Layout Task Force]] 著, [TIME[2012-03-23 20:19:12 +09:00]] 版))
<http://www.w3.org/TR/jlreq/ja/#directional_factors_in_japanese_composition>

[25] [CITE@en[CSS Writing Modes Level 3]]
( ([TIME[2013-10-24 23:21:50 +09:00]] 版))
<http://www.w3.org/TR/2013/WD-css-writing-modes-3-20131024/>

[26] [CITE@en[CSS Writing Modes Level 3]]
( ([TIME[2013-11-23 01:24:00 +09:00]] 版))
<http://www.w3.org/TR/2013/WD-css-writing-modes-3-20131126/>

[27] [CITE@en[CSS Writing Modes Level 3]]
( ([TIME[2014-03-19 00:29:02 +09:00]] 版))
<http://www.w3.org/TR/2014/CR-css-writing-modes-3-20140320/>

[28] [CITE[IRC logs: freenode / #whatwg / 20141219]]
( ([TIME[2014-12-22 23:09:27 +09:00]] 版))
<http://krijnhoetmer.nl/irc-logs/whatwg/20141219#l-130>

[29] [CITE[OASIS Open Document Format for Office Applications (OpenDocument) Version 1.2 - Part 1: OpenDocument Schema]]
([TIME[2011-09-29 13:00:00 +09:00]] 版)
<http://docs.oasis-open.org/office/v1.2/os/OpenDocument-v1.2-os-part1.html#a20_394style_writing-mode>

[30] [CITE@en[''''''[''''''css-writing-modes'''''']''''''''''''[''''''svg'''''']'''''' SVG and writing-mode]]
([[Koji Ishii]] 著, [TIME[2015-05-07 13:22:18 +09:00]] 版)
<https://lists.w3.org/Archives/Public/www-style/2015May/0092.html>

[31] [CITE@en[''''''[''''''css-writing-modes'''''']'''''' Update SVG 'writing-mode' values to compute throu… · w3c/csswg-drafts@8204f4d]]
([TIME[2015-10-06 13:14:33 +09:00]] 版)
<https://github.com/w3c/csswg-drafts/commit/8204f4d5fa23f4a640bc3d08afeb42d02560bb3e>

[32] [CITE@en[CSS Writing Modes Level 3]]
( ([TIME[2015-12-15 05:45:58 +09:00]] 版))
<http://www.w3.org/TR/2015/CR-css-writing-modes-3-20151215/>

[33] [CITE@en[CSS Writing Modes Level 3]]
([TIME[2015-12-15 03:08:15 +09:00]] 版)
<https://drafts.csswg.org/css-writing-modes-3/>

[34] [CITE@en[409155 - writing-mode doesn't work on th or td elements - chromium - Monorail]]
([TIME[2016-12-11 23:44:27 +09:00]])
<https://bugs.chromium.org/p/chromium/issues/detail?id=409155>

[35] [CITE@en[Writing Modes PR & Testsuite]]
([[Geoffrey Sneddon]]著, [TIME[2017-01-13 07:48:24 +09:00]])
<https://lists.w3.org/Archives/Public/www-style/2017Jan/0024.html>

[36] [CITE@en[Re: Writing Modes PR & Testsuite]]
([[Geoffrey Sneddon]]著, [TIME[2017-02-10 01:34:25 +09:00]])
<https://lists.w3.org/Archives/Public/www-style/2017Feb/0047.html>

[37] [CITE@en[CSS Writing Modes Level 3]]
([TIME[2017-12-06 14:47:48 +09:00]])
<https://www.w3.org/TR/2017/CR-css-writing-modes-3-20171207/>

[38] [CITE@en[CSS Writing Modes Level 4]]
([TIME[2017-12-06 15:02:10 +09:00]])
<https://www.w3.org/TR/2017/WD-css-writing-modes-4-20171207/>

[39] [CITE@en[Re: '''['''css-writing-modes''']''' Compatible proposal for a merge of direction  and writing-mode]]
([[fantasai]]著, [TIME[2018-01-16 07:14:57 +09:00]])
<https://lists.w3.org/Archives/Public/www-style/2018Jan/0059.html>

[40] [CITE@en[CSS Writing Modes Module Level 3]]
( ([TIME[2010-12-07 23:21:12 +09:00]] 版))
<http://www.w3.org/TR/2010/WD-css3-writing-modes-20101202/>

[41] [CITE@en[CSS Writing Modes Level 3]]
([TIME[2018-01-25 09:06:34 +09:00]])
<https://www.w3.org/TR/2017/CR-css-writing-modes-3-20171207/>

[42] [CITE@en[CSS Writing Modes Level 4]]
([TIME[2017-12-06 15:02:10 +09:00]])
<https://www.w3.org/TR/2017/WD-css-writing-modes-4-20171207/>

[43] [CITE@en[CSS Writing Modes Level 4]]
([TIME[2019-02-01 10:07:02 +09:00]])
<https://drafts.csswg.org/css-writing-modes/>


[47] [CITE@EN[Extensible Stylesheet Language (XSL) Version 2.0]], [TIME[2018-10-09T13:22:10.000Z]], [TIME[2020-10-23T12:51:15.244Z]] <https://www.w3.org/TR/xslfo20/#d2e425>

[48] [CITE@EN[Extensible Stylesheet Language (XSL) Version 2.0]], [TIME[2018-10-09T13:22:10.000Z]], [TIME[2020-10-23T12:51:56.425Z]] <https://www.w3.org/TR/xslfo20/#writing-mode>


[49] [CITE@EN[Extensible Stylesheet Language (XSL) Version 2.0]], [TIME[2018-10-09T13:22:10.000Z]], [TIME[2020-10-23T12:54:36.278Z]] <https://www.w3.org/TR/xslfo20/#writing-mode-related>

[51] [CITE@en-us[Timed Text Markup Language 1 (TTML1) (Third Edition)]], [TIME[2020-08-20T18:38:18.000Z]], [TIME[2020-10-23T14:35:14.528Z]] <https://www.w3.org/TR/ttml1/#style-attribute-writingMode>


[50] [CITE@en-us[Timed Text Markup Language 2 (TTML2) (2nd Edition)]], [TIME[2020-07-28T01:59:54.000Z]], [TIME[2020-10-23T14:29:39.885Z]] <https://w3c.github.io/ttml2/#style-attribute-writingMode>

[52] [CITE@en[WebVTT: The Web Video Text Tracks Format]], [TIME[2019-12-16T16:42:48.000Z]], [TIME[2020-10-23T14:37:49.773Z]] <https://w3c.github.io/webvtt/#webvtt-cue-writing-direction>

[53] [CITE@en[WebVTT: The Web Video Text Tracks Format]], [TIME[2019-12-16T16:42:48.000Z]], [TIME[2020-10-23T14:39:43.246Z]] <https://w3c.github.io/webvtt/#webvtt-vertical-text-cue-setting>