CSS 勉 強 会 ビヨンド パースペクティブ ソリューションズ 株 式 会 社 2015/09/04
自己紹介 @babatakao BPS株式会社 プログラマー EPUBエンジン 超縦書 2
目 次 CSS2の 復 習 コラム: JLReq Writing Modesの 概 要 と 縦 書 き HTML5/CSS Rubyの 基 本 と 組 版 3
CSS2の 復 習 4
CSSとは CSS 2.1 is a style sheet language that allows authors and users to attach style (e.g., fonts and spacing) to structured documents (e.g., HTML documents and XML applications). http://www.w3.org/tr/css2/ 構 造 化 文 章 (HTMLなど)に スタイル(フォントなど)を 設 定 する 5
HTMLとCSS <!DOCTYPE html> <html> <head> <title>css 勉 強 会 </title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>css 勉 強 会 2015 年 9 月 </h1> <p>こんにちは<br> 世 界!</p> </body> </html> CSS 勉 強 会 2015 年 9 月 こんにちは 世 界! CSS 勉 強 会 p { color: red; text-decoration: underline; } 6
インラインとブロック インライン ブロック むかしむかし あるところに むかしむかし あるところに おじいさんとおばあさんが住 おじいさんとおばあさんがす んでいました んでいました a, span, img, input など 横に進む 右端で折り返す div, p, h1, form など 下に進む 横いっぱいに広がる 7
HTML/CSSの 用 語 開 始 タグ 終 了 タグ <p class="text"> 日 本 語 </p> 属 性 Attribute 要 素 内 容 a:visited {color: gray;} セレクタ Selector プロパティ Property 値 Value 8
CSS Level Level!= Version http://www.w3.org/style/2011/css-process CSS Level 3 Color Level 4 Selectors Level 4 Color Level 3 Flexbox Level 1 Selectors Level 3 Writing Modes Level 3 Animations Level 1 Ruby Level 1 Media Queries Level 3 Page Floats Level 3 CSS 2.1 (Level 2 Revision 1) 9
コラム: JLREQ 10
JLReq http://www.w3.org/tr/jlreq/ Requirements for Japanese Text Layout 日 本 語 組 版 処 理 の 要 件 組 版 の 要 件 を 定 義 仕 様 書 ではない W3C Working Group Note JIS X 4051 日 本 語 のみ PDFで 読 みにくい 11
組 版 は 難 しい https://docs.google.com/presentation/d/1zimcmnv7wawybl 3fBsL5RrdL5WD0uQRFOlhJ-E5NAu0/edit 12
シリーズ http://www.w3.org/international/layout Japanese Hangul Chinese Indic Tibetan Latin Arabic Ethiopic 13
WRITING MODESの 概 要 と 縦 書 き 14
目 次 概 要 Writing Modeの 基 本 概 念 色 々な 方 向 ブロックの 進 行 方 向 行 の 進 行 方 向 行 と 文 字 の 向 き そのほかの 要 素 縦 中 横 ベースライン 登 場 するプロパティ direction unicode-bidi writing-mode text-orientation text-combine-upright 15
縦 書 きしよう! 16
<p> 縦 <br> 書 <br> き<br> の<br> 文 <br> 章 <br> </p> 17
Writing Modesの 概 要 18
Writing Modesモジュール 多 言 語 対 応 のため 書 字 方 向 を 切 り 替 える left-to-right ラテン 系 言 語 インド 語 right-to-left ヘブライ 語 アラビア 語 bidirectional ラテン 系 言 語 とアラビア 語 の 混 在 vertical 日 本 語 中 国 語 19
縦 書 きにするには?? html { writing-mode: vertical-rl; } p { text-align: left; } 縦 書 き の 文 章 20
3+1つの 方 向 21
用 語 の( 再 ) 定 義 CSS2.1では horizontal-tbしか 考 慮 され ていなかった 位 置 や 大 きさを 示 す 用 語 は 方 向 の 影 響 を 受 けるものと 受 けないものがある 物 理 座 標 を 直 接 示 すもの 進 行 方 向 (ブロック/ 行 )に 対 する 相 対 的 なも の 行 の 向 きに 対 する 相 対 的 なもの 22
用語の 再 定義 位置を表す physical 物理的な位置 margin-left border-top flow-relative ブロック/行の進行方向に対 する位置 text-indent line-relative 行の向きに対する位置 text-align text-decoration 大きさを表す physical 物理的なサイズ width height logical 縦書きでは幅 高さの意味 が入れ替わる line-height 23
ブロックの 進 行 方 向 24
インラインとブロックの進行方向 横書き 縦書き RTL むかしむかし あるところに おじいさんとおばあさんがす んでいました インラインの進行方向とブロックの進行方向は 必ず直交する ん で い ま し た お じ い さ ん と お ば あ さ ん が す む か し む か し あ る と こ ろ に 25
writing-mode プロパティ インラインとブロックの 主 要 な 進 行 方 向 を 指 定 horizontal-tb vertical-rl vertical-lr テーブルのgroup 以 外 すべてに 適 用 可 能 インラインにも! ::markerにも! Principal writing mode root 要 素 のwriting modeは ページ 進 行 方 向 に 影 響 を 与 える Replaced Element( 画 像 や 動 画 )は 回 転 しない ただし MathMLなどは 回 転 する 26
行 の 進 行 方 向 27
行 の 進 行 方 向 ش ك ر ا ل ك ل ش ى ء こんにちは 世 界 Left-to-right (LTR) Right-to-left (RTL) こ ん に ち は Hello, world. Left-to-right (LTR) 28
行 の 進 行 方 向 を 決 める 要 素 CSSプロパティ? direction, unicode-bidi HTML? <bdi>, <bdo> Unicodeの 仕 様? UAX#9 Unicodeの 制 御 文 字? LRE, RLE, LRO, RLO, PDF,... (UAX#9) フォント? 29
行 の 進 行 方 向 影 響 を 受 けるもの text-alignの 初 期 値 text-indent テーブルのカラム Col.1 Col.2 Col.3 1.1 1.2 1.3 2.1 2.2 2.3 LTR Col.3 Col.2 Col.1 1.3 1.2 1.1 2.3 2.2 2.1 RTL LTR RTL 30
行 の 向 き / 文 字 の 向 き 31
行 の 向 き と 文 字 の 向 き Line Bottom Hello, Line Top 世 界 文 字 の 向 き 32
文 字 の 向 き 自 動 判 定 rotate horizontal-only ラテン 言 語 bi-orientational 日 本 語 ハングル vertical-only モンゴル 語 Horizontal script Vertical script translate 33
World 世 界 こんにちは Hello World 世 界 こ ん に ち は Hello 文 字 の 向 き 手 動 指 定 text-orientation mixed sideways-right sideways-left upright こんにちは Hello World 世 界 行 の 向 きが 逆 になっている! W o r l d 世 界 こ ん に ち は H e l l o 34
文字の向きを指定するだけ mixedのときどうする 日本語は正立 英語は回転 じゃあこれらは ー ± ゞ 日本語はそのままでOK びっくり び っ く り 35
UTR#50とCSS Writing Modes UTR#50ではVertical_Orientation Property (VO) を 定 義 U: 正 立 R: 時 計 回 りに90 度 回 転 Tu: 縦 書 きグリフがあれば 使 い 無 ければ 正 立 Tr: 縦 書 きグリフがあれば 使 い 無 ければ90 度 回 転 CSSでは2パターンしかない typeset upright 縦 書 きグリフ/メトリクスがあれば 使 う ただし Trで 縦 書 きグリフがない 場 合 は 回 転 しても 良 い typeset sideways 横 書 き 用 のグリフ/メトリクスを 使 い 90 度 回 転 する マッピング U, Tu, Trはtypeset upright Rはtypeset sideways 変 形 す る 文 字 メートル も あ る! 36
注 意 が 必 要 な 文 字 U+2016 DOUBLE VERTICAL LINE 縦 書 きでも 縦 棒 でありたい VO: "U" そのままで 大 丈 夫 だ! CSS: "typeset upright" 回 転 しないが 縦 書 きグリフがあれば 使 う フォントの 縦 書 きグリフを 見 てみる 37
縦 中 横 38
縦 中 横 縦 書 きの 中 に 横 書 き 数 字!? (a) 常 に 正 立 <p> 平 成 <span>24</span> 年 </p> span { } text-combine-upright: all; 39
縦 中 横 の 特 徴 常 に 正 立 縦 横 中 央 1 文 字 の 縦 中 横 常 に1 文 字 ぶんのスペース OpenTypeではhwid, twid, qwid 全 角 半 角 その 他 圧 縮 原 則 1 文 字 として 扱 う text-decorationなど こんな 縦 中 横 は 嫌 だ 40
ベースライン 今 回 はやりません 41
ちょっとややこしい 話 Orthogonal Flow 42
基 本 のboxサイズ 計 算 Browser Window Hello, world. extent measure <html> <body> <p style= "border: 3px solid blue"> Hello, world. </p> </body> </html> Browser Window measure こ ん に ち は extent 43
'auto'のサイズ 計 算 measureは 広 がる 例 外 :inline-block, float, absoluteの 一 部 ケース extentは 子 にフィット writing modeが 入 れ 子 になって 循 環 依 存 する 場 合 は? 44
ちょっとややこしい 話 sideways-left 45
こんにちはcibarA egaugnalの 文 章 egaugnalの 文 章 こんにちはcibarA The population of and NY. 基 本 の 横 書 き こんにちはcibarA egaugnalの 文 章 Alabic Language という 部 分 はアラビア 語 モンゴル 語 という 部 分 はモンゴル 語 90 270 日 本 語 中 国 語 vertical-rl sideways-lr vertical-rl sideways-left モンゴル 語 vertical-lr Σ( д こんにちはcibarA egaugnalの 文 章 語 の 文 章, Hello! こんにちはモンゴル 東 京 46
Writing Modes まとめ 47
Writing Modes まとめ 4つの 方 向 を 制 御 する ブロックの 進 行 方 向 (writing-mode) 入 れ 子 にできる 行 の 進 行 方 向 (writing-mode + direction) bidiとの 関 連 行 の 向 き(writing-mode + text-orientation) sideways-leftが 特 殊 文 字 の 向 き(text-orientation) フォントやUTR#50との 関 連 文 字 は 向 きだけでなく 変 換 が 発 生 する 48
HTML5/CSS RUBYの 基 本 と 組 版 49
目 次 ルビとは 基 本 のマークアップ CSSでできるルビ モノルビ 熟 語 ルビ グループルビ ruby-position ruby-align CSSでできないルビ 登 場 するタグとプロパティ <ruby> <rt> <rb> <rtc> ruby-position ruby-merge ruby-align 50
ルビとは ルビ ruby text かがく レールガン とある 科 学 の 超 電 磁 砲 ruby base 親 文 字 51
ルビの 特 徴 横 書 きでは 上 縦 書 きでは 右 親 文 字 の1/2のサイズ 小 書 き 文 字 は 使 わない の 紋 章 を も ん し よ う とある 科 学 (かがく)の 超 電 磁 砲 (レールガン) 52
マークアップ <p> とある <ruby> <rb> 科 学 </rb> <rt>かがく</rt> </ruby> の <ruby> <rb> 超 電 磁 砲 </rb> <rt>レールガン</rt> </ruby> </p> <p> とある <ruby> 科 学 <rt>かがく </ruby> の <ruby> 超 電 磁 砲 <rt>レールガン </ruby> </p> 53
コラム:XHTML Ruby <ruby> <rbc> <rb>10</rb> <rb>31</rb> <rb>2002</rb> </rbc> <rtc> <rt>month</rt> <rt>day</rt> <rt>year</rt> </rtc> <rtc> <rt rbspan="3"> Expiration Date </rt> </rtc> </ruby> Month Day Year 10 31 2002 Expiration Date 54
コラム:どうしてこうじゃないのか <span ruby="かがく"> 科 学 </span> マークアップが 簡 単! そのままでも 読 みやすい! 55
HTML5/CSSでできるルビ モノルビ 熟 語 ルビ グループルビ 56
モ ノ ル ビ 熟 語 ル ビ 57
ぎよう し 方 角 を 凝 視 する <ruby> 凝 <rt>ぎょう</ruby><ruby> 視 <rt>し</ruby> モノルビ ぎようし 方 角 を 凝 視 する <ruby> 凝 <rb> 視 <rt>ぎょう<rt>し</ruby> 熟 語 ルビ <ruby> 凝 視 <rt>ぎょうし</ruby> グループルビ 58
熟 語 ルビ: 親 文 字 とルビ 文 字 を 対 応 させる じゆくご 新 しい 熟 語 を 覚 え ることで 新 しい 熟 くご じゆ 語 を 覚 え ることで 新 しい 熟 ご じゆく 語 を 覚 え ることで 59
グループルビが 必 要 なケース とある 科 がく レー か 学 の 超 電 とある 科 がく 学 の か ルガン 磁 砲 ルガン? レールガン 超 電 磁 砲 60
まとめ モノルビ 熟 語 ルビ グループルビ 各 文 字 に か く も じ 付 つ け る 熟 語 に じ ゆ く ご 紫 陽 花 あ じ さ い モノルビ 熟 語 ルビ グループルビ 61
HTML5/CSSでできるルビ <rp> 62
普 通 のルビ 私 は<ruby> 日 本 語 <rt>にほんご</ruby>を 話 します にほんご 私 は 日 本 語 を 話 します とても 面 白 い<ruby> 話 <rt>はなし</ruby>です はなし とても 面 白 い 話 です 63
_ 人 人 人 人 人 人 人 人 人 人 _ > 突 然 のstrip_tags() < Y^Y^Y^Y^Y^Y^Y^Y^Y^ 64
65
タグを 消 しました 私 は<ruby> 日 本 語 <rt>にほんご</ruby>を 話 します 私 は 日 本 語 にほんごを 話 します とても 面 白 い<ruby> 話 <rt>はなし</ruby>です とても 面 白 い 話 はなしです 66
<rp>を 入 れると とても 面 白 い<ruby> 話 <rp>(<rt>はなし<rp>)</ruby>です とても 面 白 い 話 (はなし)です 67
rp: Ruby Parenthesis 括 弧 を <ruby> 付 <rp>(</rp> <rt>つ</rt> <rp>)</rp> </ruby> ける つ 括 弧 を 付 ける 括 弧 を 付 (つ)ける 68
HTML5/CSSでできるルビ auto-hiding 69
auto-hiding ふ り が な 日 本 語 に 振 り 仮 名 を 日 本 語 に 振 り 仮 名 (ふりがな)を ふ が な 日 本 語 に 振 り 仮 名 を 日 本 語 に 振 (ふ)り 仮 名 (がな)を 70
auto-hiding <ruby> <rb> 振 </rb><rb>り</rb><rb> 仮 </rb><rb> 名 </rb> <rp>(</rp> <rt>ふ</rt><rt>り</rt><rt>が</rt><rt>な</rt> <rp>)</rp> <ruby> 71
HTML5/CSSでできるルビ 付 ける 側 の 指 定 72
反 対 側 にルビを 付 ける 雑 誌 の 編 集 者 は editor ruby { } ruby-position: under; 73
両 側 にルビを 付 ける けいおうぎじゆくだいがく 慶 應 義 塾 大 学 Keio University <ruby> 東 南 <rtc>とうなん</rtc> <rtc class="under">たつみ</rtc> </ruby> た つ み 東 南 の 方 角 と う な ん.under { ruby-position: under; } 74
親 文 字 とルビ 文 字 の 数 が 違 うケース にほんご 日 本 語 Japanese?? <ruby> 日 <rb> 本 <rb> 語 <rt>に<rt>ほん<rt>ご <rtc>japanese</rtc> </ruby> 75
XHTML Ruby <ruby> <rbc><rb> 日 </rb><rb> 本 </rb><rb> 語 </rb></rbc> <rtc><rt>に</rt><rt>ほん</rt><rt>ご</rt></rtc> <rtc><rt rbspan="3">japanese</rt></rtc> </ruby> HTML5 Ruby If there are not enough ruby text annotations in a ruby annotation container, the last one is associated with any excess ruby bases. ルビ 文 字 の 数 が 足 りない 場 合 最 後 の1つを 残 りの 親 文 字 に 対 応 付 ける http://www.w3.org/tr/html5/text-level-semantics.html#the-rp-element 76
親 文 字 とルビ 文 字 の 数 が 違 うケース にほんご 日 本 語 Japanese にほんご 日 本 語 Japanese <ruby> 日 <rb> 本 <rb> 語 <rt>に<rt>ほん<rt>ご <rtc>japanese</rtc> </ruby> 77
HTML5/CSSでできるルビ 配 置 指 定 78
配 置 指 定 A: ルビ 文 字 が 短 い 場 合 しめんそか 四 面 楚 歌 start ( 肩 付 き) しめんそか 四 面 楚 歌 space-around しめんそか 四 面 楚 歌 center し め ん そ か 四 面 楚 歌 space-between ruby { ruby-align: center; } 79
著 作 権 保 護 のため 非 表 示 にしています 80
配 置 指 定 A: ルビ 文 字 が 短 い 場 合 ギ ヤ ラ リ ー フ エ イ ク 神 の 左 手 悪 魔 の 右 手 space-around ギヤラリーフエイク 神 の 左 手 悪 魔 の 右 手 center 81
配 置 指 定 B: ルビ 文 字 が 長 い 場 合 金 門 橋 ゴールデンゲートブリッジ 82
配 置 指 定 B: ルビ 文 字 が 長 い 場 合 ゴールデンゲートブリッジ 私 は 金 門 橋 を 見 center ゴールデンゲートブリッジ 私 は 金 門 橋 を 見 space-around ゴールデンゲートブリッジ 私 は 金 門 橋 を 見 space-between 83
HTML5/CSSでできないルビ 行 頭 行 末 調 整 の 指 定 84
行 頭 行 末 調 整 なのは 周 囲 の じようきよう 状 況 を 考 えな がら 行 動 する 85
行 頭 行 末 調 整 なのは 周 囲 の じようきよう 状 況 を 考 えな がら 行 動 する 86
HTML5/CSSでできないルビ はみ 出 しの 指 定 87
はみ 出 し こころざし 大 切 なのは 志 をた こころざし 大 切 なのは 志 をたか こころざし 大 切 なのは 志 をたかく 88
はみ 出 し こころざし 学 生 は 皆 志 高 く みなごろし 人 類 鏖 計 画 89
はみ 出 し ~JLReq~ a. 前 又 は 後 ろにくる 漢 字 等 (cl-19)にルビ 文 字 を 掛 けてはならない. b. 前 又 は 後 ろにくる 平 仮 名 (cl-15), 片 仮 名 (cl-16), 長 音 記 号 (cl-10) 又 は 小 書 きの 仮 名 (cl-11)に 最 大 でルビ 文 字 サ イズの 全 角 までルビ 文 字 を 掛 けてもよい. 90
はみ 出 し こころざし 大 切 なのは 志 高 く こころざし 学 生 は 皆 志 高 く みなごろし 人 類 鏖 計 画 91
はみ 出 し あかつきおもむき 景 色 に 暁 の 趣 を 感 じ じようきようおもんぱか 周 囲 の 状 況 を 慮 る 92
HTML5/CSSでできないルビ 小 書 き 文 字 変 換 の 指 定 93
小 書 き 文 字 の 変 換 じゅくご 熟 語 じゆくご 熟 語 CSSで 自 動 変 換 を 制 御 する 機 能 はない OpenTypeの"ruby" + font-feature-settings? 94
まとめ:ルビに 関 する 組 版 事 項 の 対 応 項 目 モノルビ 熟 語 ルビ グループルビ ルビをどちら 側 につけるか ひらがなに 対 するルビの 非 表 示 ルビのはみ 出 し ルビの 寄 せ 行 頭 行 末 調 整 ルビの 肩 付 け 親 文 字 の 伸 長 両 面 ルビ 小 書 き 文 字 変 換 CSS <ruby> 人 <rt>ひと</rt></ruby> ruby-merge: separate <ruby> 熟 <rb> 語 <rt>じゅく<rt>ご</ruby> ruby-merge: collapse <ruby> 紫 陽 花 <rt>あじさい</ruby> ruby-position 自 動 UA 依 存 ruby-align UA 依 存 ruby-align ruby-align rtc + ruby-position なし(OpenType featureはあり) 95
まとめ 96
まとめ HTMLとCSS 基 本 はCSS2.1で CSS3の 各 モジュールがそれを 拡 張 する CSS3にはたくさんのモジュールがあり 個 別 に 標 準 化 が 進 められている Writing Modes 4つの 方 向 を 制 御 する ブロックの 進 行 方 向 (writing-mode) 入 れ 子 にできる 行 の 進 行 方 向 (writing-mode + direction) bidiとの 関 連 行 の 向 き(writing-mode + textorientation) sideways-leftが 特 殊 文 字 の 向 き(text-orientation) フォントやUTR#50との 関 連 文 字 は 向 きだけでなく 変 換 が 発 生 する HTML5/CSS Ruby <ruby>と<rt>による 基 本 マークアップ モノルビ 熟 語 ルビ グループルビ <rp> ruby-positionと 両 面 ルビ ruby-align auto-hiding 行 頭 行 末 調 整 はみ 出 し 97