Vivliostyle.jsの先行実装から考えるCSS text-spacingプロパティ

Transcript

1. 7JWMJPTUZMFKT ͷઌߦ࣮૷͔Βߟ͑Δ
   $44UFYUTQBDJOH ϓϩύςΟ
   鈴⽊丈
   

   View Slide

2. text-spacing は CSS Text Module Level 4 のプロパティで、
   特定のキャラクターのスペーシングをコントロールするもの
   2022 年 11 ⽉現在では実装しているブラウザーはまだないが、
   Vivliostyle.js はこの機能を先⾏実装している
   ここでは⽇本語タイポグラフィにおける
   和欧間、連続する約物、⾏頭・⾏末の約物のスペーシングについて、
   Vivliostyle.js の実装を⾒ながら考察したい
   

   View Slide

3. ໨࣍
   text-spacing プロパティ
   和欧間のスペーシング
   連続する約物のスペーシング
   ⾏頭・⾏末の約物のスペーシング
   

   View Slide

4. text-spacing プロパティ
   

   View Slide

5. UFYUTQBDJOH ϓϩύςΟ
   /* Value */
   
   
   normal | none | auto | no-compress ||
   
   
   [ trim-start | space-start | space-first ] ||
   
   
   [ trim-end | space-end | allow-end ] ||
   
   
   [ trim-adjacent | space-adjacent ] ||
   
   
   ideograph-alpha || ideograph-numeric || punctuation
   
   
   /* Example */
   
   
   body {
   
   
   text-spacing:
   
   
   trim-start space-end trim-adjucent
   
   
   ideograph-alpha ideograph-numeric;
   
   
   }
   

   View Slide

6. 和欧間のスペーシング
   

   View Slide

7. ೔ຊޠ૊൛ͷඪ४
   ⽇本語組版において、テクストのなかに
   欧⽂（ラテン⽂字）を配置する場合、
   和⽂と欧⽂とのあいだにアキ（スペース）
   を置くのが⼀般的
   アキ量（スペースの幅）は 1/4 em（四分）
   を基本とし、1/3 em から 1/8 em 程度の
   あいだで調整される
   

   View Slide

8. ೔ຊޠ૊൛ͷඪ४
     和⽂組版の中に欧⽂が混植される場合、
     和欧⽂間の字間は通常四分（ないし三分程度）空け、
     許容最⼩値（約 1/6 em）と最⼤値（約 1/2 em）を設定する。
     …（数字と欧⽂の間の空きについては、
     和欧⽂間の空きより 1/6 em 程度⼩さくするという意⾒もある）
    府川充男『組版原論』1996
     英数字の登場頻度が⾼い場合は 0〜12.5%、
     ⼀般的には 12.5〜25% が望ましいが、
     英数字の登場頻度や媒体の性質、⽂章の内容
     に応じてアキを調節するようにしたい。
    ⼯藤強勝（監修）
   『
   デザイン解体新書』2006
   

   View Slide

9. Ԥจͷϫʔυεϖʔε
   欧⽂のワードスペース（単語間のアキ）は 1/4 em が平均で、
   組み⽅や⽂字サイズなどによって 1/3 em から 1/5 em 程度のあいだで調整
     はっきりと空いていることがわかるが、
     空きすぎてはいない単語間とは、
     普通 em スペースの 4 分の 1 ほどだ。
     たとえば 10 pt で組む場合には 2.5 pt となる。
     しかし最終的な判断は、例によって、
     眼でしっかりと⾒て決めるしかない。
    ヨースト・ホフリ『ディテール・イン・タイポグラフィ』2017
   

   View Slide

10. $44UFYUTQBDJOH ϓϩύςΟ
    ideograph-alpha
    
    
      CJK キャラクターと⾮ CJK  ⽂字のあいだにアキを作る
    ideograph-numeric
    
    
      CJK キャラクターと⾮ CJK  数字のあいだにアキを作る
    /* Example */
    
    
    body {
    
    
    text-spacing:
    
    
    trim-start space-end trim-adjucent
    
    
    ideograph-alpha ideograph-numeric;
    
    
    }
    

    View Slide

11. 7JWMJPTUZMFKTʹΑΔ࿨ԤؒͷΞΩͷ࣮૷
    Times New Roman のスペース（U+20）の幅が
    1/4 em であることを利⽤して 1/6 em のアキを実現
      0.25 × 0.666 ＝ 0.166 em（1/6 em）
    margin ではなく content によるスペースを使う理由：
     ・和欧間の境界で⾏が折り返したときアキができない
     ・両端揃えのときアキがスペーシング調整の対象となる
    

    View Slide

12. NBD04 ͱ J04 ʹ͓͚Δ࿨Ԥؒͷεϖʔγϯά
    macOS と iOS において、アプリケーションによっては
    和欧間に 1/8 em 程度のアキが⼊る（2021 年の iOS 14 から？）
    

    View Slide

13. ΢Σϒʹ͓͍ͯద੾ͳ࿨ԤؒͷΞΩ͸ʁ
    今後ブラウザーが text-spacing による和欧間のアキを実装するうえで、
    デフォルトのアキ量はどの程度が適切か？
    これまでのブラウザーでは和欧間のアキがなかったうえ、
    ウェブのテクストには⽂中に欧⽂が登場する頻度も⾼い
    そのためこれまで組版で標準とされてきた
    1/4 em のアキでは読み⼿が不⾃然に感じる可能性があり、
    1/6 em もしくは 1/8 em 程度の「控えめ」なアキが適切と思われる
    

    View Slide

14. 連続する約物のスペーシング
    

    View Slide

15. ࿈ଓ͢Δ໿෺ͷεϖʔγϯά
    ⽇本語の括弧類や句読点、
    中点などの約物が連続する場合、
    その組み合わせに応じて
    約物間のアキを調節する
    

    View Slide

16. 0QFO5ZQF ϑΟʔνϟʔͷར༻
    連続する約物のアキを調整する⽅法のひとつに、
    OpenType フィーチャーの chws と vchw がある
    body {
    
    
    font-feature-settings: "chws" 1;
    
    
    }
    
    
    利⽤するにはフィーチャーを組み込んだフォントが必要
      約味……約物フォント
      フォントプラス……ウェブフォント配信サービス
      chws_tool……フォントに chws/vchw を組み込むツール
    

    View Slide

17. $44UFYUTQBDJOH ϓϩύςΟ
    space-adjucent
    
    
      約物間を詰めず、全⾓ドリとする
    trim-adjucent
    
    
      特定の組み合わせで約物間を詰める
    /* Example */
    
    
    body {
    
    
    text-spacing:
    
    
    trim-start space-end trim-adjucent
    
    
    ideograph-alpha ideograph-numeric;
    
    
    }
    

    View Slide

18. 7JWMJPTUZMFKT ʹΑΔ࿈ଓ໿෺ͷεϖʔγϯάͷ࣮૷
    所感
     ・chws/vchwとの競合は？
     ・コンデンスト体やエクスパンデッド体
      では無効化？
    

    View Slide

19. ⾏頭・⾏末の約物のスペーシング
    

    View Slide

20. ߦ಄ɾߦ຤ͷ໿෺ͷεϖʔγϯά
    ⽇本語の始め括弧類が⾏頭に配置される場合と、
    終わり括弧類や句読点、中点類が⾏末に配置される場合、
    その配置⽅法にはいくつかのヴァリエーションがある
    

    View Slide

21. 7JWMJPTUZMFKT ʹΑΔߦ಄ɾߦ຤ͷ໿෺ͷεϖʔγϯάͷ࣮૷
    所感
     ・chws/vchw では実現できない！
     ・コンデンスト体やエクスパンデッド体
      では無効化？
    

    View Slide

22. $44UFYUTQBDJOH ϓϩύςΟ
    trim-first
    
    
      ⾏頭の始め括弧類の前にアキなし
    space-start
    
    
      ⾏頭の始め括弧類の前に半⾓アキ
    space-first
    
    
      段落 1 ⾏⽬⾏頭と強制改⾏直後の括弧類の前に半⾓アキ、それ以外はアキなし
    trim-end
    
    
      ⾏末の終わり括弧類・句読点類・中点類の後ろにアキなし
    space-end
    
    
      ⾏末の終わり括弧類・句読点類・中点類の後ろに半⾓アキ
    

    View Slide

23. ࢀߟจݙ
    CSS Text Module Level 4, 8.4. Character Class Spacing: the text-spacing property
      https://www.w3.org/TR/css-text-4/#text-spacing-property
    Requirements for Japanese Text Layout (⽇本語組版処理の要件)
      https://w3.org/TR/jlreq
    web における和欧間スペース from ⽊⽥泰夫 on 2022-06-27 (public-i18n-japanese@w3.org Mail Archives)
      https://lists.w3.org/Archives/Public/public-i18n-japanese/2022AprJun/0110.html
    Character design standards - Space characters for Latin 1 - Typography | Microsoft Learn
      https://learn.microsoft.com/en-us/typography/develop/character-design-standards/whitespace
    府川充男『組版原論 タイポグラフィと活字・写植・DTP』太⽥出版、1996
    逆井克⼰『基本⽇本語⽂字組版』⽇本印刷新聞社、1999
    ⼯藤強勝（監修）
    『
    デザイン解体新書』ワークスコーポレーション、2006
    ⼤熊肇『⽂字の組み⽅ 組版／⾒てわかる新常識』誠⽂堂新光社、2010
    Robert Bringhurst, The Elements of Typographic Style, 4th ed. Hartley & Marks, Publishers, 2012
    ヨースト・ホフリ『ディテール・イン・タイポグラフィ』⿆倉聖⼦監修、⼭崎秀貴訳、Book & Design、2017
    向井裕⼀『⽇本語組版⼊⾨ その構造とアルゴリズム』誠⽂堂新光社、2018
    

    View Slide

24. Vivliostyle.js の先⾏実装から考える
    CSS text-spacing プロパティ
    2022年11⽉20⽇
    CSS 組版 Vivliostyle ユーザーと開発者の集い 2022 秋
    鈴⽊丈（すずき・たける）
    terkel.jp
    使⽤書体
    たづがね⾓ゴシック Book、Bold（Monotype）
    TheSans Mono Condensed Regular（LucasFonts）
    

    View Slide