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
280
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
950
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.5k
シン・サーバの形は。
spring_raining
0
340
Other Decks in Technology
See All in Technology
AI によるドキュメント処理を加速するためのOCR 結果の永続化と再利用戦略
tomoaki25
0
350
Kiroから考える AIコーディングツールの潮流
s4yuba
4
630
VLMサービスを用いた請求書データ化検証 / SaaSxML_Session_1
sansan_randd
0
210
製造業の課題解決に向けた機械学習の活用と、製造業特化LLM開発への挑戦
knt44kw
0
150
LIFF CLIとngrokを使ったLIFF/LINEミニアプリのお手軽実機確認
diggymo
0
220
Google Cloud で学ぶデータエンジニアリング入門 2025年版 #GoogleCloudNext / 20250805
kazaneya
PRO
10
2.5k
Claude Codeから我々が学ぶべきこと
s4yuba
6
1.1k
AWS re:Inforce 2025 re:Cap Update Pickup & AWS Control Tower の運用における考慮ポイント
htan
1
190
MCP認可の現在地と自律型エージェント対応に向けた課題 / MCP Authorization Today and Challenges to Support Autonomous Agents
yokawasa
3
1.2k
LLMでAI-OCR、実際どうなの? / llm_ai_ocr_layerx_bet_ai_day_lt
sbrf248
0
420
生成AI時代におけるAI・機械学習技術を用いたプロダクト開発の深化と進化 #BetAIDay
layerx
PRO
1
970
モバイルゲームの開発を支える基盤の歩み ~再現性のある開発ラインを量産する秘訣~
qualiarts
0
1.1k
Featured
See All Featured
Site-Speed That Sticks
csswizardry
10
750
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1k
Side Projects
sachag
455
43k
The Cost Of JavaScript in 2023
addyosmani
51
8.7k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.4k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
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 トランスパイラ