CSS勉強会

Size: px

Start display at page:

Download "CSS勉強会"

あいりみおか
7 years ago
Views:

1 CSS 勉強会ビヨンドパースペクティブソリューションズ株式会社 2015/09/04

2 BPS株式会社プログラマー EPUBエンジン超縦書 2

3 目次 CSS2の復習コラム: JLReq Writing Modesの概要と縦書き HTML5/CSS Rubyの基本と組版 3

4 CSS2の復習 4

5 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). 構造化文章 (HTMLなど)にスタイル(フォントなど)を設定する 5

6 HTMLとCSS <!DOCTYPE html> <html> <head> <title>css 勉強会 </title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>css 勉強会 2015 年 9 月 </h1> こんにちは 世界! </body> </html> CSS 勉強会 2015 年 9 月こんにちは世界! CSS 勉強会 p { color: red; text-decoration: underline; } 6

7 インラインとブロックインラインブロックむかしむかしあるところにむかしむかしあるところにおじいさんとおばあさんが住おじいさんとおばあさんがすんでいましたんでいました a, span, img, input など横に進む右端で折り返す div, p, h1, form など下に進む横いっぱいに広がる 7

8 HTML/CSSの用語開始タグ終了タグ 日本語 属性 Attribute 要素内容 a:visited {color: gray;} セレクタ Selector プロパティ Property 値 Value 8

9 CSS Level Level!= Version 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

10 コラム: JLREQ 10

11 JLReq Requirements for Japanese Text Layout 日本語組版処理の要件組版の要件を定義仕様書ではない W3C Working Group Note JIS X 4051 日本語のみ PDFで読みにくい 11

12 組版は難しい 3fBsL5RrdL5WD0uQRFOlhJ-E5NAu0/edit 12

13 シリーズ Japanese Hangul Chinese Indic Tibetan Latin Arabic Ethiopic 13

14 WRITING MODESの概要と縦書き 14

15 目次概要 Writing Modeの基本概念色々な方向ブロックの進行方向行の進行方向行と文字の向きそのほかの要素縦中横ベースライン登場するプロパティ direction unicode-bidi writing-mode text-orientation text-combine-upright 15

16 縦書きしよう! 16

17 縦 書 き の 文 章 17

18 Writing Modesの概要 18

19 Writing Modesモジュール多言語対応のため書字方向を切り替える left-to-right ラテン系言語インド語 right-to-left ヘブライ語アラビア語 bidirectional ラテン系言語とアラビア語の混在 vertical 日本語中国語 19

20 縦書きにするには?? html { writing-mode: vertical-rl; } p { text-align: left; } 縦書きの文章 20

21 3+1つの方向 21

22 用語の( 再 ) 定義 CSS2.1では horizontal-tbしか考慮されていなかった位置や大きさを示す用語は方向の影響を受けるものと受けないものがある物理座標を直接示すもの進行方向 (ブロック/ 行 )に対する相対的なもの行の向きに対する相対的なもの 22

23 用語の再定義位置を表す physical 物理的な位置 margin-left border-top flow-relative ブロック/行の進行方向に対する位置 text-indent line-relative 行の向きに対する位置 text-align text-decoration 大きさを表す physical 物理的なサイズ width height logical 縦書きでは幅高さの意味が入れ替わる line-height 23

24 ブロックの進行方向 24

25 インラインとブロックの進行方向横書き縦書き RTL むかしむかしあるところにおじいさんとおばあさんがすんでいましたインラインの進行方向とブロックの進行方向は必ず直交するんでいましたおじいさんとおばあさんがすむかしむかしあるところに 25

26 writing-mode プロパティインラインとブロックの主要な進行方向を指定 horizontal-tb vertical-rl vertical-lr テーブルのgroup 以外すべてに適用可能インラインにも! ::markerにも! Principal writing mode root 要素のwriting modeはページ進行方向に影響を与える Replaced Element( 画像や動画 )は回転しないただし MathMLなどは回転する 26

27 行の進行方向 27

28 行の進行方向 ش ك ر ا ل ك ل ش ى ء こんにちは世界 Left-to-right (LTR) Right-to-left (RTL) こんにちは Hello, world. Left-to-right (LTR) 28

29 行の進行方向を決める要素 CSSプロパティ? direction, unicode-bidi HTML? <bdi>, <bdo> Unicodeの仕様? UAX#9 Unicodeの制御文字? LRE, RLE, LRO, RLO, PDF,... (UAX#9) フォント? 29

30 行の進行方向影響を受けるもの text-alignの初期値 text-indent テーブルのカラム Col.1 Col.2 Col LTR Col.3 Col.2 Col RTL LTR RTL 30

31 行の向き / 文字の向き 31

32 行の向きと文字の向き Line Bottom Hello, Line Top 世界文字の向き 32

33 文字の向き自動判定 rotate horizontal-only ラテン言語 bi-orientational 日本語ハングル vertical-only モンゴル語 Horizontal script Vertical script translate 33

34 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

35 文字の向きを指定するだけ mixedのときどうする日本語は正立英語は回転じゃあこれらはー ± ゞ日本語はそのままでOK びっくりびっくり 35

36 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

37 注意が必要な文字 U+2016 DOUBLE VERTICAL LINE 縦書きでも縦棒でありたい VO: "U" そのままで大丈夫だ! CSS: "typeset upright" 回転しないが縦書きグリフがあれば使うフォントの縦書きグリフを見てみる 37

38 縦中横 38

39 縦中横縦書きの中に横書き数字!? (a) 常に正立 平成 24 年 span { } text-combine-upright: all; 39

40 縦中横の特徴常に正立縦横中央 1 文字の縦中横常に1 文字ぶんのスペース OpenTypeではhwid, twid, qwid 全角半角その他圧縮原則 1 文字として扱う text-decorationなどこんな縦中横は嫌だ 40

41 ベースライン今回はやりません 41

42 ちょっとややこしい話 Orthogonal Flow 42

43 基本のboxサイズ計算 Browser Window Hello, world. extent measure <html> <body> Hello, world. </body> </html> Browser Window measure こんにちは extent 43

44 'auto'のサイズ計算 measureは広がる例外 :inline-block, float, absoluteの一部ケース extentは子にフィット writing modeが入れ子になって循環依存する場合は? 44

45 ちょっとややこしい話 sideways-left 45

46 こんにちはcibarA egaugnalの文章 egaugnalの文章こんにちはcibarA The population of and NY. 基本の横書きこんにちはcibarA egaugnalの文章 Alabic Language という部分はアラビア語モンゴル語という部分はモンゴル語日本語中国語 vertical-rl sideways-lr vertical-rl sideways-left モンゴル語 vertical-lr Σ( д こんにちはcibarA egaugnalの文章語の文章, Hello! こんにちはモンゴル東京 46

47 Writing Modes まとめ 47

48 Writing Modes まとめ 4つの方向を制御するブロックの進行方向 (writing-mode) 入れ子にできる行の進行方向 (writing-mode + direction) bidiとの関連行の向き(writing-mode + text-orientation) sideways-leftが特殊文字の向き(text-orientation) フォントやUTR#50との関連文字は向きだけでなく変換が発生する 48

49 HTML5/CSS RUBYの基本と組版 49

50 目次ルビとは基本のマークアップ CSSでできるルビモノルビ熟語ルビグループルビ ruby-position ruby-align CSSでできないルビ登場するタグとプロパティ <ruby> <rt> <rb> <rtc> ruby-position ruby-merge ruby-align 50

51 ルビとはルビ ruby text かがくレールガンとある科学の超電磁砲 ruby base 親文字 51

52 ルビの特徴横書きでは上縦書きでは右親文字の1/2のサイズ小書き文字は使わないの紋章をもんしようとある科学 (かがく)の超電磁砲 (レールガン) 52

53 マークアップ とある <ruby> <rb> 科学 </rb> <rt>かがく</rt> </ruby> の <ruby> <rb> 超電磁砲 </rb> <rt>レールガン</rt> </ruby> とある <ruby> 科学 <rt>かがく </ruby> の <ruby> 超電磁砲 <rt>レールガン </ruby> 53

54 コラム: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 Expiration Date 54

55 コラム:どうしてこうじゃないのか 科学 マークアップが簡単! そのままでも読みやすい! 55

56 HTML5/CSSでできるルビモノルビ熟語ルビグループルビ 56

57 モノルビ熟語ルビ 57

58 ぎようし方角を凝視する <ruby> 凝 <rt>ぎょう</ruby><ruby> 視 <rt>し</ruby> モノルビぎようし方角を凝視する <ruby> 凝 <rb> 視 <rt>ぎょう<rt>し</ruby> 熟語ルビ <ruby> 凝視 <rt>ぎょうし</ruby> グループルビ 58

59 熟語ルビ: 親文字とルビ文字を対応させるじゆくご新しい熟語を覚えることで新しい熟くごじゆ語を覚えることで新しい熟ごじゆく語を覚えることで 59

60 グループルビが必要なケースとある科がくレーか学の超電とある科がく学のかルガン磁砲ルガン? レールガン超電磁砲 60

61 まとめモノルビ熟語ルビグループルビ各文字にかくもじ付つける熟語にじゆくご紫陽花あじさいモノルビ熟語ルビグループルビ 61

62 HTML5/CSSでできるルビ <rp> 62

63 普通のルビ私は<ruby> 日本語 <rt>にほんご</ruby>を話しますにほんご私は日本語を話しますとても面白い<ruby> 話 <rt>はなし</ruby>ですはなしとても面白い話です 63

64 _ 人人人人人人人人人人 _ > 突然のstrip_tags() < Y^Y^Y^Y^Y^Y^Y^Y^Y^ 64

65 65

66 タグを消しました私は<ruby> 日本語 <rt>にほんご</ruby>を話します私は日本語にほんごを話しますとても面白い<ruby> 話 <rt>はなし</ruby>ですとても面白い話はなしです 66

67 <rp>を入れるととても面白い<ruby> 話 <rp>(<rt>はなし<rp>)</ruby>ですとても面白い話 (はなし)です 67

68 rp: Ruby Parenthesis 括弧を <ruby> 付 <rp>(</rp> <rt>つ</rt> <rp>)</rp> </ruby> けるつ括弧を付ける括弧を付 (つ)ける 68

69 HTML5/CSSでできるルビ auto-hiding 69

70 auto-hiding ふりがな日本語に振り仮名を日本語に振り仮名 (ふりがな)をふがな日本語に振り仮名を日本語に振 (ふ)り仮名 (がな)を 70

71 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

72 HTML5/CSSでできるルビ付ける側の指定 72

73 反対側にルビを付ける雑誌の編集者は editor ruby { } ruby-position: under; 73

74 両側にルビを付けるけいおうぎじゆくだいがく慶應義塾大学 Keio University <ruby> 東南 <rtc>とうなん</rtc> <rtc class="under">たつみ</rtc> </ruby> たつみ東南の方角とうなん.under { ruby-position: under; } 74

75 親文字とルビ文字の数が違うケースにほんご日本語 Japanese?? <ruby> 日 <rb> 本 <rb> 語 <rt>に<rt>ほん<rt>ご <rtc>japanese</rtc> </ruby> 75

76 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つを残りの親文字に対応付ける 76

77 親文字とルビ文字の数が違うケースにほんご日本語 Japanese にほんご日本語 Japanese <ruby> 日 <rb> 本 <rb> 語 <rt>に<rt>ほん<rt>ご <rtc>japanese</rtc> </ruby> 77

78 HTML5/CSSでできるルビ配置指定 78

79 配置指定 A: ルビ文字が短い場合しめんそか四面楚歌 start ( 肩付き) しめんそか四面楚歌 space-around しめんそか四面楚歌 center しめんそか四面楚歌 space-between ruby { ruby-align: center; } 79

80 著作権保護のため非表示にしています 80

81 配置指定 A: ルビ文字が短い場合ギヤラリーフエイク神の左手悪魔の右手 space-around ギヤラリーフエイク神の左手悪魔の右手 center 81

82 配置指定 B: ルビ文字が長い場合金門橋ゴールデンゲートブリッジ 82

83 配置指定 B: ルビ文字が長い場合ゴールデンゲートブリッジ私は金門橋を見 center ゴールデンゲートブリッジ私は金門橋を見 space-around ゴールデンゲートブリッジ私は金門橋を見 space-between 83

84 HTML5/CSSでできないルビ行頭行末調整の指定 84

85 行頭行末調整なのは周囲のじようきよう状況を考えながら行動する 85

86 行頭行末調整なのは周囲のじようきよう状況を考えながら行動する 86

87 HTML5/CSSでできないルビはみ出しの指定 87

88 はみ出しこころざし大切なのは志をたこころざし大切なのは志をたかこころざし大切なのは志をたかく 88

89 はみ出しこころざし学生は皆志高くみなごろし人類鏖計画 89

90 はみ出し ~JLReq~ a. 前又は後ろにくる漢字等 (cl-19)にルビ文字を掛けてはならない. b. 前又は後ろにくる平仮名 (cl-15), 片仮名 (cl-16), 長音記号 (cl-10) 又は小書きの仮名 (cl-11)に最大でルビ文字サイズの全角までルビ文字を掛けてもよい. 90

91 はみ出しこころざし大切なのは志高くこころざし学生は皆志高くみなごろし人類鏖計画 91

92 はみ出しあかつきおもむき景色に暁の趣を感じじようきようおもんぱか周囲の状況を慮る 92

93 HTML5/CSSでできないルビ小書き文字変換の指定 93

94 小書き文字の変換じゅくご熟語じゆくご熟語 CSSで自動変換を制御する機能はない OpenTypeの"ruby" + font-feature-settings? 94

95 まとめ:ルビに関する組版事項の対応項目モノルビ熟語ルビグループルビルビをどちら側につけるかひらがなに対するルビの非表示ルビのはみ出しルビの寄せ行頭行末調整ルビの肩付け親文字の伸長両面ルビ小書き文字変換 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 まとめ 96

97 まとめ 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

PowerPoint プレゼンテーション

PowerPoint プレゼンテーション縦書き Web デザイン 2 0 1 6 年 1 月 21 日 ( 木 ) 縦書き Web デザインアワード連動企画作品応募〆切は 2 月 8 日 ( 月 ) 縦書きサイトの事例 POPY Novels 全家研月刊ポピー CSSで実現している小説本文が縦書き http://www.popy.jp/fresta/novel s/3nen/index.php