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
940
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
270
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
710
今こそCSS組版
spring_raining
5
2.5k
シン・サーバの形は。
spring_raining
0
340
Other Decks in Technology
See All in Technology
いつの間にか入れ替わってる!?新しいAWS Security Hubとは?
cmusudakeisuke
0
160
「クラウドコスト絶対削減」を支える技術—FinOpsを超えた徹底的なクラウドコスト削減の実践論
delta_tech
4
190
アクセスピークを制するオートスケール再設計: 障害を乗り越えKEDAで実現したリソース管理の最適化
myamashii
1
330
伴走から自律へ: 形式知へと導くSREイネーブリングによる プロダクトチームの信頼性オーナーシップ向上 / SRE NEXT 2025
visional_engineering_and_design
3
230
ゼロからはじめる採用広報
yutadayo
4
1k
TLSから見るSREの未来
atpons
2
240
データ基盤からデータベースまで?広がるユースケースのDatabricksについて教えるよ!
akuwano
3
160
Getting to Know Your Legacy (System) with AI-Driven Software Archeology (WeAreDevelopers World Congress 2025)
feststelltaste
1
180
モニタリング統一への道のり - 分散モニタリングツール統合のためのオブザーバビリティプロジェクト
niftycorp
PRO
1
360
ソフトウェアQAがハードウェアの人になったの
mineo_matsuya
3
110
【LT会登壇資料】TROCCO新コネクタ「スマレジ」を活用した直営店データの分析
kazari0425
1
170
【あのMCPって、どんな処理してるの?】 AWS CDKでの開発で便利なAWS MCP Servers特集
yoshimi0227
6
730
Featured
See All Featured
Facilitating Awesome Meetings
lara
54
6.5k
For a Future-Friendly Web
brad_frost
179
9.8k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
Code Reviewing Like a Champion
maltzj
524
40k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
54k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
The World Runs on Bad Software
bkeepers
PRO
69
11k
Thoughts on Productivity
jonyablonski
69
4.7k
Faster Mobile Websites
deanohume
307
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 トランスパイラ