Printable Web

Printable Web

Kyoto.js 14で発表しました
Author: @spring_raining

42ba906dc35ef460ffcb1b7c3307ef45?s=128

spring_raining

March 24, 2018
Tweet

Transcript

  1. 7.

    CSS 組版は要件が先行 非日本語ネイティブの開発者に 「縦中横」 「ぶら下げ組」 など を伝えるのはむずい JLREQ の要件がCSS やEPUB

    に採用されたりされなかったり 他に中国語/ 韓国語/ インド系言語/ エチオピア語/ アラビア 語/ ヘブライ語/ チベット語/ 欧文自身の組版要件も 日本語組版の要件(JLREQ)
  2. 8.
  3. 13.

    例: Vertical Rhythm 要素の高さは一定幅の倍数で揃っていると見栄えが良い JLREQ の 「行取り」 に近い考え pixel やem

    でも指定できるけど、line-height-step で勝手に 揃えてくれる! chrome://flags/#enable-experimental-web-platform- features を有効にすると適用できる
  4. 15.

    例: カウンタ 自動で番号を割り振り参照もできる ただしブラウザでは未実装 <a class="figref" href="#cat"></a> を見てくれ!! <figure> <img

    src="nuko.png"> <figcaption id="cat"> ぬこ</figcaption> </figure> body { counter-reset: fig; } figcaption { counter-increment: fig; } figcaption::before { content: ' 図' counter(fig) '. '; } a.figref::after { content: ' 図' target-counter(attr(href), f }
  5. 16.

    例: 柱・ノンブル CSS Paged Media で実現 ただしブラウザでは未実装 @page { @bottom-left

    { content: counter(page); background-color: black; } @bottom-center { background-color: black; } @bottom-right { background-color: black; } }
  6. 18.
  7. 20.