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]] との統合が本格的に始まる
-- [77] 
[CODE[reference-orientation]] に90度単位で向きを指定できる
<https://www.w3.org/TR/1999/WD-xsl-19990421/#reference-orientation>
-- [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>
- [78] [CITE[Extensible Stylesheet Language (XSL)]], [TIME[2017-10-02T10:23:25.000Z]], [TIME[2020-10-26T09:44:15.652Z]] <https://www.w3.org/TR/2000/WD-xsl-20000112/#glyph-orientation-horizontal>

[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]] が含まれた理由がよくわかりません。

[81] 
[[XSL]] と何の関係があるのかわからない[[国際連合]]云々という基準で、
[[モンゴル文字]]の [CODE[tb-lr]] 
は追加の値に格下げされました。

[79] 
向きの指定は
[CODE[glyph-orientation-horizontal]],
[CODE[glyph-orientation-vertical]]
で90度単位で指定できるようになりました。
I18N, CSS, SVG 
と協同で議論中とありました。
[SRC[>>78]]
結局 [[XSL 2.0]] の最期までほぼそのままでした。
[CODE[reference-orientation]] 
も残され、 [[XSL 2.0]] の最期まで存続しました。

[80] 
[CODE[glyph-orientation-vertical]]
には
[CODE[auto]]
があり、
全角の漢字とラテン文字は 0、
それ以外は 90 とされました。
漢字用句読点とその他漢字的文字は[[横書き字形]]、[[縦書き字形]]の別があるとき[[縦書き字形]]を使うとされました。
回転する文字の決定は[[利用者エージェント]]依存で、
country, language, script, character properties, font, character context
によって複雑で、
[[UTR #11]],
[[JIS]],
その他[[国家標準]]に従うのが良いとされました。





-*-*-

[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>