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
820
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
CSS Variable をもっと活用する / Kyoto.js 18
spring_raining
4
1.6k
Vivliostyle CLIで広がるCSS組版のエコシステム / Vivliostyle user & developer meetup 2020 autumn
spring_raining
0
2.3k
Markdownの複雑化と締め切りのはざまで / Vivliostyle meetup
spring_raining
0
760
JavaScriptでもディープラーニングってやつでなんとかして / Kyoto.js 15
spring_raining
2
2k
CSS組版の救世主 Vivliostyle / HTML5 Conference 2018
spring_raining
6
7.3k
印刷・出版のためのオンラインエディタ Viola / Viola - Online editor for printing and publishing
spring_raining
3
630
今こそCSS組版
spring_raining
5
2.3k
シン・サーバの形は。
spring_raining
0
300
クライアントサイドWebアプリはいいぞ
spring_raining
0
560
Other Decks in Technology
See All in Technology
A (short) History of AI
harishpillay
0
100
普段有償でサポート業務をしているCSAが技術知見を無料で公開する理由
07jp27
1
620
Delivering Millions of Messages within seconds @ Duolingo
pelelgrino
0
320
Data and AI Governance: Existing Challenges and Emerging Trends
scotthsieh825
0
140
Next'24 事例セッションの紹介とクラウド資格を活用したキャリア形成について語りMuscle
yasumuusan
0
260
Databricks における 『MLOps』
databricksjapan
2
130
Hands-on / Kaname Frusawa / Cloud Compare Users Meetup 2024 at University of Tokyo on April 17
paraworld
2
470
人間の尊厳、幸福、アクセシビリティ / 第116回「WEB TOUCH MEETING」アクセシビリティSP
nulabinc
PRO
2
180
プロデザ! BY リクルート vol.18_リクルートのリサーチ実践組織「リサーチブーストコミュニティ」
recruitengineers
PRO
2
230
LLM とプロンプトエンジニアリング/チューターをビルドする / LLM and Prompt Engineering and Building Tutors
ks91
PRO
0
220
Databricksを活用してDELISH KITCHENのレシピレコメンドを開発した話
furu8
0
250
プロトタイピングによる不確実性の低減 / Reducing Uncertainty through Prototyping
ohbarye
3
150
Featured
See All Featured
Unsuck your backbone
ammeep
662
57k
Making Projects Easy
brettharned
107
5.5k
The Power of CSS Pseudo Elements
geoffreycrofte
58
5k
Designing with Data
zakiwarfel
95
4.8k
Build The Right Thing And Hit Your Dates
maggiecrowley
23
2k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
24
2.3k
Building a Modern Day E-commerce SEO Strategy
aleyda
16
6.3k
Docker and Python
trallard
33
2.7k
Reflections from 52 weeks, 52 projects
jeffersonlam
343
19k
Why You Should Never Use an ORM
jnunemaker
PRO
50
8.6k
Code Reviewing Like a Champion
maltzj
513
39k
KATA
mclloyd
14
12k
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 トランスパイラ