Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
日本語組版に関連するCSS規格の策定状況について
Search
JunTajima
February 07, 2020
Programming
0
540
日本語組版に関連するCSS規格の策定状況について
Page2020オープンイベント XMLパブリッシング交流会発表資料
JunTajima
February 07, 2020
Tweet
Share
More Decks by JunTajima
See All by JunTajima
EPUBファイルからVivliostyleでPDFを作る
juntajima
0
860
XMLパブリッシング交流会2019パネルディスカッション資料
juntajima
0
690
Page2019 Adobeクリエイティブゾーンセミナー用資料
juntajima
0
840
Page2018 Adobeクリエイティブゾーンセミナーd8-2スライド
juntajima
0
770
Page2018 XMLパブリッシング交流会プレゼン資料(田嶋分)
juntajima
0
790
Other Decks in Programming
See All in Programming
AIと”コードの評価関数”を共有する / Share the "code evaluation function" with AI
euglena1215
1
170
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
760
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
chiilog
1
270
20250704_教育事業におけるアジャイルなデータ基盤構築
hanon52_
5
800
ふつうの技術スタックでアート作品を作ってみる
akira888
1
870
プロダクト志向なエンジニアがもう一歩先の価値を目指すために意識したこと
nealle
0
130
第9回 情シス転職ミートアップ 株式会社IVRy(アイブリー)の紹介
ivry_presentationmaterials
1
320
RailsGirls IZUMO スポンサーLT
16bitidol
0
190
Code as Context 〜 1にコードで 2にリンタ 34がなくて 5にルール? 〜
yodakeisuke
0
130
新メンバーも今日から大活躍!SREが支えるスケールし続ける組織のオンボーディング
honmarkhunt
5
7.5k
Hack Claude Code with Claude Code
choplin
4
2.1k
技術同人誌をMCP Serverにしてみた
74th
1
650
Featured
See All Featured
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Unsuck your backbone
ammeep
671
58k
Gamification - CAS2011
davidbonilla
81
5.4k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
GraphQLとの向き合い方2022年版
quramy
49
14k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Transcript
日本語組版に関連する CSS 規格の策定状況について JAGAT XML パブリッシング準研究会 資料作成:田嶋 淳 http://densyodamasii.com/
W3C の規格が策定に至るまでの道のり Editor’s Draft 作業草案 Working Draft/WD 勧告候補 Candidate Recommendation/CR 勧告案 Proposed Recommendation/PR
勧告 Recommendation/Rec 各段階での個々の議論の結果が Editor's Draft に記述され、ある程度まとまった段階で WD、CR など の文書となって随時公開される。最終的に Rec として承認されるまでは何度でも手戻りはあり得る。
CSS の策定状況 CSS 2.1 ↓ (CSS3) ↓ 各機能要素ごとのモジュールに分化した CSS 2.1
に入っていた要素はレベル「3」スタート(例:CSS Text Level3) 新たに追加された要素はレベル「1」スタート(例:CSS Ruby Layout Level1) 個々のプロパティ単位で次レベル送りになったりもする (例:text-spacing は当初 CSS Text Level3 で議論されていたが Level4 扱いに)
日本語組版への関連性が深い CSS モジュール CSS Writing Modes CSS Fragmentation CSS Line
Grid CSS Rhythmic Sizing CSS Logical Properties and Values CSS Ruby Layout CSS Text CSS Text Decoration
W3C 公式テストを見る 各プロパティのブラウザでの動作状況を確認するには① ここをクリック 「Test Case」 「Reference Page」 の表示をタブで切り替え、一致して いればそのブラウザ環境で表示対応
できている
各プロパティのブラウザでの動作状況を確認するには② web-platform-tests を見る http://wpt.fyi トップ 「CSS/」をクリックしてモジュールの一覧へ モジュール内各プロパティのテストページ一覧 各プロパティのテスト結果が見られる
CSS Writing Modes Level 3 https://www.w3.org/TR/css-writing-modes-3/ 規格策定段階: 勧告(Recommendation) 2019/12/10 関連する主な日本語組版要素:
縦組み/縦組み中の文字の向き
▼サンプルコード ▼表示例(Chrome) writing-mode で縦組み(vertical-rl)を指定し、一部の漢字を text-orientation で横転(sideways)を 指定した例 Unicode で決まっている縦組みテキスト中での文字のデフォルトの向きも関わってくる UAX#50
Unicode Vertical Text Layout https://www.unicode.org/reports/tr50/
CSS Fragmentation Module Level 3 https://www.w3.org/TR/css-break-3/ 規格策定段階: 勧告候補(Candidate Recommendation) 2018/12/4
関連する主な日本語組版要素: 改ページ処理、孤立行防止処理
Vivliostyle によるページネーションのデモ
CSS Line Grid Module Level 1 / CSS Rhythmic Sizing
https://drafts.csswg.org/css-line-grid/ 規格策定段階: 作業草案(Working Draft) 2014/9/16(Line Grid) 作業草案(Working Draft) 2017/3/2(Rhythmic Sizing) 関連する主な日本語組版要素: 行取り/行グリッド https://drafts.csswg.org/css-rhythm/
CSS Rhythmic Sizing デモ(CSS Working Group のもの)*動作には Chrome の設定が必要 https://drafts.csswg.org/css-rhythm/examples/snap-height.html
CSS Logical Properties and Values Level 1 https://www.w3.org/TR/css-logical-1/ 規格策定段階: 作業草案(Working
Draft) 2018/8/27 関連する主な日本語組版要素: インデント値、行間値指定などあらゆる数値指定要素 (書字方向にかかわらず論理方向指定ができる)
幅、高さなどの数値を論理値で指定し、書字方向の縦/横に依存しない指定を実現させる width/height → block-size/inline-size right/left → block-start-side/block-end-side top/bottom → inline-start-side/inline-end-side
縦横の一括変換が可能に:writingmode のオプション変更だけで OK
CSS Ruby Layout Module Level 1 https://drafts.csswg.org/css-ruby-1/ 規格策定段階: 規格策定段階:作業草案(Working Draft)
2014/8/5 関連する主な日本語組版要素: ルビ
▼サンプルコード ▼表示例(Firefox) 現状すでに通常のルビは各ブラウザで表示できるが、さらに高度なルビ表現の実現が検討されている
CSS Text Module Level 3 https://www.w3.org/TR/css-text-3/ 規格策定段階: 作業草案(Working Draft) 2019/11/13
関連する主な日本語組版要素: ぶら下げ組み
CSS Text Module Level 4 https://www.w3.org/TR/css-text-4/ 規格策定段階: 作業草案(Working Draft) 2019/11/13
関連する主な日本語組版要素: 約物の前後のツメ処理、和欧間自動アキ
▼ w3c / i18n tests で公開準備中のテストページ。対応すれば赤と黒の文字が重なる。 日本語の約物の前後のアキ制御、和欧間の自動アキ挿入を CSS で指定できるようにすることが検討中
▼ text-spacing が規格化されればカギ類等の表示の挙動も統一されるはず 現状規格が定まっていないために起きているぶら下げインデントのレイアウトの問題も解消が期待できる
CSS Text Decoration Module Level 3 https://www.w3.org/TR/css-text-decor-3/ 規格策定段階: 勧告候補(Candidate Recommendation)
2019/8/13 関連する主な日本語組版要素: 圏点
各プロパティの実装状況 CSS Writing Modes 縦書き(writing-mode:vertical-rl) ……………………………◦ (単純な)縦中横(text-combine-upright:all) … ……………◦
正立/横転指定(text-orientation) ……………………………△ ※ Safari がまだ怪しい CSS Fragmentation ※ページネート関連プロパティのテストの仕組み自体がこれから CSS Line Grid ※テスト見当たらず CSS Rhythmic Sizing… ……………………………………× CSS Logical Properties and Values… ……………◦ ※単純な指定なら大丈夫そう CSS Ruby Layout 肩付き/中付きルビ指定(ruby-align) …………………………× ※ Firefox 以外ほぼダメ 左側ルビ(ruby-position) … ……………………………………× ※ Firefox 以外怪しい CSS Text ぶら下げ組み(hanging-punctuation) ………………………△ ※まだ若干挙動が怪しい 約物前後のツメ処理、和欧間自動アキ(text-spacing) … ……× ※テスト自体がまだ作成中 CSS Text Decoration 圏点(text-emphasis-style) ……………………………………◦ ※単純な指定なら大丈夫そう ※ web-platform-tests でのテスト結果を参照/ 2020 年 1 月 21 日現在