Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Printable Web
Search
spring_raining
March 24, 2018
Technology
3
950
Printable Web
Kyoto.js 14で発表しました
Author: @spring_raining
spring_raining
March 24, 2018
Tweet
Share
More Decks by spring_raining
See All by spring_raining
Webフレームワークとともに利用するWeb components / JSConf.jp おかわり
spring_raining
1
290
CSS Variable をもっと活用する / Kyoto.js 18
spring_raining
4
1.8k
Vivliostyle CLIで広がるCSS組版のエコシステム / Vivliostyle user & developer meetup 2020 autumn
spring_raining
0
2.6k
Markdownの複雑化と締め切りのはざまで / Vivliostyle meetup
spring_raining
0
960
JavaScriptでもディープラーニングってやつでなんとかして / Kyoto.js 15
spring_raining
2
2.2k
CSS組版の救世主 Vivliostyle / HTML5 Conference 2018
spring_raining
6
8.3k
印刷・出版のためのオンラインエディタ Viola / Viola - Online editor for printing and publishing
spring_raining
3
720
今こそCSS組版
spring_raining
5
2.6k
シン・サーバの形は。
spring_raining
0
340
Other Decks in Technology
See All in Technology
フルカイテン株式会社 エンジニア向け採用資料
fullkaiten
0
8.6k
[CVPR2025論文読み会] Linguistics-aware Masked Image Modelingfor Self-supervised Scene Text Recognition
s_aiueo32
0
210
ZOZOTOWNフロントエンドにおけるディレクトリの分割戦略
zozotech
PRO
18
5.4k
実践データベース設計 ①データベース設計概論
recruitengineers
PRO
3
260
7月のガバクラ利用料が高かったので調べてみた
techniczna
3
450
Figma + Storybook + PlaywrightのMCPを使ったフロントエンド開発
yug1224
9
2.7k
GitHub Copilot coding agent を推したい / AIDD Nagoya #1
tnir
3
4.6k
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
30k
Devinを使ったモバイルアプリ開発 / Mobile app development with Devin
yanzm
0
190
Browser
recruitengineers
PRO
4
340
小さなチーム 大きな仕事 - 個人開発でAIをフル活用する
himaratsu
0
120
あとはAIに任せて人間は自由に生きる
kentaro
3
1.1k
Featured
See All Featured
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Raft: Consensus for Rubyists
vanstee
140
7.1k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
110
20k
Agile that works and the tools we love
rasmusluckow
329
21k
Embracing the Ebb and Flow
colly
87
4.8k
Code Review Best Practice
trishagee
70
19k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
Art, The Web, and Tiny UX
lynnandtonic
302
21k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Faster Mobile Websites
deanohume
309
31k
Transcript
Printable Web 2018/3/24 Kyoto.js 14 @spring_raining
自己紹介 はるさめ / GitHub: 大阪の大学院生 研究でWebAssembly の機運 @spring_raining spring-raining https://harusamex.com
同人誌制作 趣味で技術系同人誌を制作しています
最古の記録媒体 紙
紙の歴史 世界初のブラウザ: 1991 年(27 年前) パピルス: BC3000 年(5000 年前) 185
倍の歴史! ! ! !
CSS 組版とは? Web と紙に出力したい… でも別々にレイアウトするのはめんどくさい… Web のレイアウトをそのまま紙に印刷すれば解決!
CSS 組版は要件が先行 非日本語ネイティブの開発者に 「縦中横」 「ぶら下げ組」 など を伝えるのはむずい JLREQ の要件がCSS やEPUB
に採用されたりされなかったり 他に中国語/ 韓国語/ インド系言語/ エチオピア語/ アラビア 語/ ヘブライ語/ チベット語/ 欧文自身の組版要件も 日本語組版の要件(JLREQ)
None
電子書籍といえばEPUB 実はHTML とCSS ファイル(+α) をZIP で固めただけ
EPUB →CSS IDPF(EPUB 策定フォーラム) はW3C に統合 将来的にEPUB はWeb 技術の一部となる
WD: Web Publications Chrome 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; }
例: カウンタ 自動で番号を割り振り参照もできる ただしブラウザでは未実装 <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 }
例: 柱・ノンブル CSS Paged Media で実現 ただしブラウザでは未実装 @page { @bottom-left
{ content: counter(page); background-color: black; } @bottom-center { background-color: black; } @bottom-right { background-color: black; } }
未実装の仕様が 多すぎる! ! ! ! !
None
Vivliostyle 未実装のCSS 機能のPolyfill を提供 商業誌でも使われています
None
これから Vivliostyle は企業としての活動と分裂して、 完全にオープンな コミュニティに生まれ変わる spring-raining はCollaborator に! PR お待ちしております!
Vivliostyle を ためしてみよう
Viola 多機能CSS 組版エディタ( 自画自賛) https://viola.pub
実装予定 オンライン同期(Dropbox API ?) CSS テンプレート いい感じのMarkdown トランスパイラ