CSS勉強会
ビヨンド・パースペクティブ・
ソリューションズ株式会社
自己紹介
• @babatakao
• BPS株式会社
• プログラマー
目次
• CSS2の復習
• コラム: JLReq
• Writing Modesの概要と縦書き
• HTML5/CSS Rubyの基本と組版
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など）に
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> p { color: red; text-decoration: underline; CSS勉強会2015年9月 こんにちは 世界！ CSS勉強会 ×インラインとブロック
インライン ブロック
むかしむかし、あるところに、 おじいさんとおばあさんが住 んでいました。
a, span, img, input など • 横に進む • 右端で折り返す むかしむかし、あるところに、 おじいさんとおばあさんがす んでいました。 div, p, h1, form など • 下に進む • 横いっぱいに広がる
HTML/CSSの用語
a:visited
{
color
:
gray
;}
セレクタ プロパティ
<p
class="text"
>
日本語
</p>
要素 属性 Attribute 内容 開始タグ 終了タグCSS Level
• Level != Version
• http://www.w3.org/Style/2011/CSS-process
Writing Modes Level 3 Ruby Level 1 Selectors Level 3 Media Queries Level 3 ColorLevel 3 FlexboxLevel 1 AnimationsLevel 1
Page Floats Level 3 CSS 2.1 (Level 2 Revision 1) CSS Level 3 Color
JLReq
•
http://www.w3.org/TR/jlreq/
• Req
uirements for
J
apanese Text
L
ayout
– 日本語組版処理の要件
• 組版の要件を定義
– 仕様書ではない
– W3C Working Group Note
• JIS X 4051
– 日本語のみ
シリーズ
• http://www.w3.org/International/layout
– Japanese
– Hangul
– Chinese
– Indic
– Tibetan
– Latin
– Arabic
– Ethiopic
目次
• 概要
– Writing Modeの基本概念
• 色々な「方向」
– ブロックの進行方向
– 行の進行方向
– 行と文字の向き
• そのほかの要素
– 縦中横
– ベースライン
【登場するプロパティ】 • direction • unicode-bidi • writing-mode • text-orientation • text-combine-upright<p>
縦<br>
書<br>
き<br>
の<br>
文<br>
章<br>。
</p>
Writing Modesモジュール
多言語対応のため、書字方向を切り替える
• left-to-right
– ラテン系言語、インド語• right-to-left
– ヘブライ語、アラビア語• bidirectional
– ラテン系言語とアラビア語の混在• vertical
– 日本語、中国語縦書きにするには
html {
writing-mode: vertical-rl;
}
p {
text-align: left;
}
縦
書
き
の
文
章
??
用語の（再）定義
• CSS2.1では、horizontal-tbしか考慮され
ていなかった
• 位置や大きさを示す用語は、方向の影響
を受けるものと受けないものがある
– 物理座標を直接示すもの
– 進行方向（ブロック/行）に対する相対的なも
の
– 行の向きに対する相対的なもの
用語の（再）定義
位置を表す • physical – 物理的な位置 – margin-left – border-top • flow-relative – ブロック/行の進行方向に対 する位置 – text-indent • line-relative – 行の向きに対する位置 – text-align – text-decoration 大きさを表す • physical – 物理的なサイズ – width – height • logical – 縦書きでは幅・高さの意味 が入れ替わる – line-heightインラインとブロックの進行方向
横書き 縦書き（RTL） むかしむかし、あるところに、 おじいさんとおばあさんがす んでいました。 む か し む か し 、 あ る と こ ろ に 、 お じ い さ ん と お ば あ さ ん が す ん で い ま し た 。 インラインの進行方向とブロックの進行方向は 必ず直交する。writing-mode プロパティ
• インラインとブロックの主要な進行方向を指定 – horizontal-tb – vertical-rl – vertical-lr • テーブルのgroup以外すべてに適用可能 – インラインにも！ – ::markerにも！• Principal writing mode
– root要素のwriting modeは、ページ進行方向に影響を与 える
• Replaced Element（画像や動画）は回転しない
行の進行方向
こんにちは、世界
ءْىَش
ِ لُكِل اًرْكُش
Left-to-right (LTR) Right-to-left (RTL)Hello,
wor
ld.
こ
ん
に
ち
は
Left-to-right (LTR)行の進行方向を決める要素
• CSSプロパティ？ – direction, unicode-bidi • HTML？ – <bdi>, <bdo> • Unicodeの仕様？ – UAX#9 • Unicodeの制御文字？– LRE, RLE, LRO, RLO, PDF, ... (UAX#9)
• フォント？
行の進行方向 影響を受けるもの
• text-alignの初期値、text-indent
• テーブルのカラム
Col.1 Col.2 Col.3
1.1 1.2 1.3 2.1 2.2 2.3
Col.3 Col.2 Col.1
1.3 1.2 1.1 2.3 2.2 2.1
行の向き と 文字の向き
Hello,
世
界
Line Top Line Bottom 文字の向き文字の向き 自動判定
• horizontal-only
– ラテン言語• bi-orientational
– 日本語、ハングル• vertical-only
– モンゴル語 Vertical script Horizontal script rotate translate文字の向き 手動指定
text-orientation
こ
ん
に
ち
は
Hello
World
世
界
こんにちは
Hello
Worl
d
世界
World
世界
こんにち
は
Hello
こ
ん
に
ち
は
H
e
l
l
W
o
r
l
d
世
界
mixed sideways-right sideways-left upright
﹅ ﹅ ﹅ ﹅ ﹅ ﹅ ﹅ ﹅ ﹅ ﹅ ﹅ ﹅ ﹅ ﹅ ﹅ ﹅ ﹅ ﹅ ﹅ ﹅ 行の向きが 逆になっている！
文字の向きを指定するだけ？
mixedのときどうする？ • 日本語は正立 • 英語は回転 • じゃあこれらは？ → ← ↑ → （ ） ＜ ＞ 「 」 “ ” ー ～ 〒 ｜ ： ； ！ ？ ‖ ± ∴ ∵ ゞ ㍍ ㍑ 日本語はそのままでOK？びっくり
び
く
り
っ
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
“ 変 形 す る 「 文 字 ㍍ 」 も あ る ！ ”
注意が必要な文字
• U+2016 DOUBLE VERTICAL LINE 「‖」
– 縦書きでも、縦棒でありたい
– VO: "U" → そのままで大丈夫だ！ – CSS: "typeset upright"
• 回転しないが、縦書きグリフがあれば使う – フォントの縦書きグリフを見てみる
縦中横
• 縦書きの中に横書き
– 数字、!?、(a)
• 常に正立
<p>平成<span>24</span>年</p> span { text-combine-upright: all; }縦中横の特徴
• 常に正立、縦横中央
– 1文字の縦中横
• 常に1文字ぶんのスペース
– OpenTypeではhwid, twid, qwid – 全角→半角
– その他圧縮
• 原則、1文字として扱う
ベースライン
ちょっとややこしい話
Orthogonal Flow
基本のboxサイズ計算
Hello, world. Browser Window こ ん に ち は Browser Window <html> <body> <p style="border: 3px solid blue"> Hello, world. </p> </body> </html> measure extent extent measure 43
'auto'のサイズ計算
• measureは広がる
– 例外：inline-block, float, absoluteの一部
ケース
• extentは子にフィット
• writing modeが入れ子になって循環依存
する場合は？
ちょっとややこしい話
sideways-left
cibarA
aL
の文章
語
の文章
,
Hell
o!
こんにちは
モンゴル
「Alabic Language」という部分はアラビア語 「モンゴル語」という部分はモンゴル語こんにちは
cibarA
egaugnaL
の文章
基本の横書きこんにちは
cibarA
egau
gn
aL
の文章
日本語、中国語 vertical-rlThe pop
ulation
of
and NY
.
東
京
sideways-lr モンゴル語 vertical-lr Σ（゜д゜gn
aL
の文章
cibarA
vertical-rl sideways-left 90° 270°Writing Modes まとめ
• 4つの方向を制御する
– ブロックの進行方向（writing-mode） • 入れ子にできる – 行の進行方向（writing-mode + direction） • bidiとの関連 – 行の向き（writing-mode + text-orientation） • sideways-leftが特殊 – 文字の向き（text-orientation） • フォントやUTR#50との関連• 文字は向きだけでなく、変換が発生する
目次
• ルビとは
• 基本のマークアップ
• CSSでできるルビ
– モノルビ、熟語ルビ、グループルビ
– ruby-position
– ruby-align
• CSSでできないルビ
【登場するタグとプロパティ】 • <ruby> • <rt> • <rb> • <rtc> • ruby-position • ruby-mergeルビとは
とある科学の超電磁砲
かがく
レールガン
ruby base
【親文字】
【ルビ】
ruby text
ルビの特徴
• 横書きでは上
• 縦書きでは右
• 親文字の1/2のサイズ
• 小書き文字は使わない
の
紋
章
を
も
ん
し
よ
う
とある科学（かがく）の超電磁砲（レールガン）マークアップ
<p> とある <ruby> <rb>科学</rb> <rt>かがく</rt> </ruby> の <ruby> <rb>超電磁砲</rb> <rt>レールガン</rt> </ruby> </p> <p> とある <ruby> 科学<rt>かがく </ruby> の <ruby> 超電磁砲<rt>レールガン </ruby> </p>コラム：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>10 31 2002
Month Day Year Expiration Date
コラム：どうしてこうじゃないのか
<span
ruby="かがく"
>
科学
</span>
マークアップが簡単！
【HTML5/CSSでできるルビ】
モノルビ・熟語ルビ・グループルビ
モ ノ ル ビ 熟 語 ル ビ
方角を凝視する
ぎようし
方角を 凝 視する
ぎよう し
<ruby>凝<rt>ぎょう</ruby><ruby>視<rt>し</ruby> <ruby>凝<rb>視<rt>ぎょう<rt>し</ruby> モノルビ 熟語ルビ熟語ルビ：親文字とルビ文字を対応させる
新しい熟
語を覚え
ることで
じゆくご新しい熟
語を覚え
ることで
じゆ くご新しい熟
語を覚え
ることで
じゆく ごグループルビが必要なケース
とある科
学の超電
磁砲
か
がく
レー
ルガン
ルガン？
とある科
学の
超電磁砲
か
がく
レールガン
各
文
字
に
か
く
も
じ
まとめ
モノルビ・熟語ルビ・グループルビ
じ
ゆ
く
ご
紫
陽
花
熟
語
に
あ
じ
さ
い
つ
付
け
る
モノルビ 熟語ルビ グループルビ【HTML5/CSSでできるルビ】
<rp>
普通のルビ
私は<ruby>日本語<rt>にほんご</ruby>を話します。 とても面白い<ruby>話<rt>はなし</ruby>です。私は日本語を話します。
にほんごとても面白い話です。
はなし＿人人人人人人人人人人＿
＞ 突然のstrip_tags() ＜
タグを消しました
私は<ruby>日本語<rt>にほんご</ruby>を話します。
とても面白い<ruby>話<rt>はなし</ruby>です。
私は日本語にほんごを話します。
<rp>を入れると
とても面白い<ruby>話<rp>(<rt>はなし<rp>)</ruby>です。
rp: Ruby Parenthesis
括弧を <ruby> 付 <rp>(</rp> <rt>つ</rt> <rp>)</rp> </ruby> ける括弧を付ける
つ
括弧を付(つ)ける
【HTML5/CSSでできるルビ】
auto-hiding
auto-hiding
日本語に振り仮名を
ふ り が な
日本語に振り仮名を
日本語に振り仮名(ふりがな)を
日本語に振(ふ)り仮名(がな)を
ふ
が な
auto-hiding
<ruby> <rb>振</rb><rb>り</rb><rb>仮</rb><rb>名</rb> <rp>(</rp> <rt>ふ</rt><rt>り</rt><rt>が</rt><rt>な</rt> <rp>)</rp> <ruby>【HTML5/CSSでできるルビ】
付ける側の指定
反対側にルビを付ける
雑誌の編集者は
editor
ruby {
ruby-position: under;
}
両側にルビを付ける
慶應義塾大学
Keio University
けいおうぎじゆくだいがく
東
南
の
方
角
と
う
な
ん
た
つ
み
<ruby> 東南 <rtc>とうなん</rtc> <rtc class="under">たつみ</rtc> </ruby>親文字とルビ文字の数が違うケース
<ruby> 日<rb>本<rb>語 <rt>に<rt>ほん<rt>ご <rtc>Japanese</rtc> </ruby>Japanese
日本語
にほんご
??
If there are not enough ruby text annotations in a ruby
annotation container, the last one is associated with any excess ruby bases. ルビ文字の数が足りない場合、最後の1つを残りの親文字に対応付ける。 <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> XHTML Ruby HTML5 Ruby
親文字とルビ文字の数が違うケース
<ruby> 日<rb>本<rb>語 <rt>に<rt>ほん<rt>ご <rtc>Japanese</rtc> </ruby>Japanese
日本語
にほんご
Japanese
日本語
にほんご
【HTML5/CSSでできるルビ】
配置指定
配置指定A: ルビ文字が短い場合
四面楚歌
しめんそか
四面楚歌
し め ん そ か
四面楚歌
し め ん そ か
四面楚歌
しめんそか
ruby { ruby-align: center; }
start (肩付き) space-around
space-between center
配置指定A: ルビ文字が短い場合
神の左手悪魔の右手
ギヤラリーフエイク
神の左手悪魔の右手
ギ ヤ ラ リ ー フ エ イ ク
space-around
