@KAN0U 氏による、NatさんによるInDesignとCSSに関する説明まとめ
-
- いいね！0
Creative.Edge
@commonstyle
パネル3スタート：「CSSにおける将来の日本語レイアウト」／モデレータ: 石井 宏治氏(W3C CSS WG Editor)、パネリスト: 小池 利明氏(ボイジャー)、齋鹿 尚史氏(シャープ)、Nat McCully氏(アドビ システムズ) #css2011jp
2011-05-30 13:12:47
狩野宏樹
@KAN0U
Natさんの説明まとめ(1) 各社ヒアリングをしてInDesign に最初に追加した機能は、ベースラインの計算。フォント毎に欧文ベースラインの設定がまちまちだったのが、行のずれの原因になっていた。 #css2011jp
2011-05-30 13:32:49
狩野宏樹
@KAN0U
最新ツイート:Natさんの説明まとめ(2): InDesignでの追加：現在行と次の行との関係の再定義（行送りの基準点を中央・仮想ボディの上端などサポート）、文字組アキ量設定（各出版社のハウスルールをサポートの為複雑化。どこまで手動調整を減らせるか試みた） #css2011jp
2011-05-30 13:35:53
狩野宏樹
@KAN0U
Natさんの説明まとめ(3) :行の配置方法、ブラウザとInDesignは違う。縦書きではラインボックスを並べていく点は同じ。横書きでは、ブラウザはline box の高さ Line Height = 行送りとなっている（欧文のスタンダード）のがIDと違う。 #css2011jp
2011-05-30 13:38:45
狩野宏樹
@KAN0U
Natさんの説明まとめ(4): InDesignで変更した手順：1) フォントのメトリクスを得て、ascent + descent = text height の計算。これで行のベースラインが決まる（ここまでは同じ。行送りの中にどう配置するかが違う）。 #css2011jp
2011-05-30 13:41:20
狩野宏樹
@KAN0U
Natさんの説明まとめ(5): InDesignでは最初の行が特別扱いで1行めはフレーム端からAscent分だけしか送らない。2行目からは行送りいっぱい送る。和文の場合、1行めは仮想ボディの高さ、2行め以降は「前の行の行アキ＋仮想ボディ」だけ空けて送る。 #css2011jp
2011-05-30 13:46:03
狩野宏樹
@KAN0U
Natさんの説明まとめ(6): CSSではテキストを置く時、行アキの半分をline boxの上に、半分を下に置く。（どんなフォントを指定されても文字同士が重なる心配がなくなるから）。 #css2011jp
2011-05-30 13:48:45
狩野宏樹
@KAN0U
Natさんの説明まとめ(7): 行送りの基準は欧文ベースラインなので、和文を思ったように組めない可能性がある。例えば、フォントサイズを行中で拡大 したばあい、「一番大きい文字のサイズ＋行アキの半分」が1行目のベースラインの位置になる。 #css2011jp
2011-05-30 13:51:48
狩野宏樹
@KAN0U
Natさんの説明まとめ(8): 10年ほど前は、このような原因で、文字がズレるという「事故」が起っていた。InDesignの和文行位置の計算方法では、仮想ボディから中央揃えのベースラインを最初に計算している。1行目の基準点は常に仮想ボディに接していて、 #css2011jp
2011-05-30 13:59:15
狩野宏樹
@KAN0U
Natさんの説明まとめ(9): 1行目の基準点が常に仮想ボディに接していて、仮想ボディと欧文ベースラインの関係が分かっていれば、フレームに対する文字の位置が曖昧さ無く定まる。 #css2011jp
2011-05-30 14:01:41
狩野宏樹
@KAN0U
Natさんの説明まとめ(10): EPUB, CSS3ではいろいろなベースラインがサポートされている。仮想ボディの中央/下/上に揃えることも可能になった。少し進歩しているが、行の高さに対して行をどう置くかが、少し曖昧さが残っている。 #css2011jp
2011-05-30 14:04:15
狩野宏樹
@KAN0U
Natさんの説明まとめ(11) : InDesign英語版と日本語版の違い: 欧文の場合は、2番目の行に行送りを設定すると、その行が動くようになっている。日本語版は、1番上の行に行送りを設定すると次の行が動く。行送りの効く方向が英語版と逆になっている。 #css2011jp
2011-05-30 14:08:24
狩野宏樹
@KAN0U
Natさんの説明まとめ(12): 英語版と逆にしたのは、日本で行われているレイアウト指定の「行送り何歯」などをそのまま再現できるようにしたため。ちなみに、モリサワと写研の写植を比較したら、写研のほうは中央ベースラインで計算、モリサワは端から計算していた。 #css2011jp
2011-05-30 14:11:08
狩野宏樹
@KAN0U
Natさんの説明まとめ(13): グリッドについて: ベースライングリッドと仮想ボディグリッドの二つがある（和文で使うのは後者）。これによって、行取りという機能がサポートできる。
2011-05-30 14:12:43
狩野宏樹
@KAN0U
Natさんの説明まとめ(14): グリッドを使う理由：目が一つのフレームをなめている時、上の行の大きな文字を読んだ後に下の行を読む時に、一定のピッチだと読みやすい、と言われている。また、多段組み、隣接ページと行の高さが並んでいる方が見ばえが良い。 #css2011jp
2011-05-30 14:15:27
狩野宏樹
@KAN0U
Natさんの説明まとめ(15): em-boxベースのグリッドを開発していた時、「1文字1文字原稿用紙のように置かなくていいの?」とよく聞かれた。日本語では、欧文が混在したり、約物連続で半角になったりした時に行中の文字が升目からずれる。 #css2011jp
2011-05-30 14:19:05
狩野宏樹
@KAN0U
Natさんの説明まとめ(16): 中国語組版と日本語との違い: 中国語では、「半端が出た時には、行中の文字がなるべく早くグリッドに揃うように調整してほしい」という要求もある。日本語では、行末さえ揃っていれば、行途中の文字は升目に入っていなくてもどうでもいい。 #css2011jp
2011-05-30 14:22:04
狩野宏樹
@KAN0U
Natさんの説明まとめ(17): 文字組みアキ量設定については1時間ぐらい話せるが、あと1分しか時間がないので、ここで終わる。 #css2011jp
2011-05-30 14:24:12
狩野宏樹
@KAN0U
Natさんの追加説明: InDesignの欧文用のベースライングリッドは、フレームがどこにあってもフレーム内のテキストがページグリッドに揃うための機能。和文のグリッドはそれと異なり、フレームの大きさを整数倍に揃える＆各行の配置を本文の仮想ボディサイズに揃える #css2011jp
2011-05-30 14:48:47