Kyoto.js 14で発表しました Author: @spring_raining
Printable Web2018/3/24 Kyoto.js 14@spring_raining
View Slide
自己紹介はるさめ / GitHub:大阪の大学院生研究でWebAssemblyの機運@spring_rainingspring-raininghttps://harusamex.com
同人誌制作趣味で技術系同人誌を制作しています
最古の記録媒体紙
紙の歴史世界初のブラウザ: 1991年(27年前)パピルス: BC3000年(5000年前)185倍の歴史!!!!
CSS組版とは?Webと紙に出力したい…でも別々にレイアウトするのはめんどくさい…Webのレイアウトをそのまま紙に印刷すれば解決!
CSS組版は要件が先行非日本語ネイティブの開発者に「縦中横」「ぶら下げ組」などを伝えるのはむずいJLREQの要件がCSSやEPUBに採用されたりされなかったり他に中国語/韓国語/インド系言語/エチオピア語/アラビア語/ヘブライ語/チベット語/欧文自身の組版要件も日本語組版の要件(JLREQ)
電子書籍といえばEPUB実はHTMLとCSSファイル(+α)をZIPで固めただけ
EPUB→CSSIDPF(EPUB策定フォーラム)はW3Cに統合将来的にEPUBはWeb技術の一部となる
WD: Web PublicationsChrome ExtensionのようにJSONのマニフェストを用意ServiceWorkerでオフラインキャッシュしたり、Web Paymentsで販売したり
CSS組版 実例
例: Vertical Rhythm要素の高さは一定幅の倍数で揃っていると見栄えが良いJLREQの「行取り」に近い考えpixelやemでも指定できるけど、line-height-stepで勝手に揃えてくれる!chrome://flags/#enable-experimental-web-platform-featuresを有効にすると適用できる
例: float property「図の周りに文章を流し込むやつ」がパワーアップただしブラウザでは未実装img {float-reference: page;float: bottom;}
例:カウンタ自動で番号を割り振り参照もできるただしブラウザでは未実装を見てくれ!!ぬこbody {counter-reset: fig;}figcaption {counter-increment: fig;}figcaption::before {content: '図' counter(fig) '. ';}a.figref::after {content: '図' target-counter(attr(href), f}
例:柱・ノンブルCSS Paged Mediaで実現ただしブラウザでは未実装@page {@bottom-left {content: counter(page);background-color: black;}@bottom-center {background-color: black;}@bottom-right {background-color: black;}}
未実装の仕様が多すぎる!!!!!
Vivliostyle未実装のCSS機能のPolyfillを提供商業誌でも使われています
これからVivliostyleは企業としての活動と分裂して、完全にオープンなコミュニティに生まれ変わるspring-rainingはCollaboratorに!PRお待ちしております!
Vivliostyleをためしてみよう
Viola多機能CSS組版エディタ(自画自賛)https://viola.pub
実装予定オンライン同期(Dropbox API?)CSSテンプレートいい感じのMarkdownトランスパイラ