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
890
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.7k
Vivliostyle CLIで広がるCSS組版のエコシステム / Vivliostyle user & developer meetup 2020 autumn
spring_raining
0
2.5k
Markdownの複雑化と締め切りのはざまで / Vivliostyle meetup
spring_raining
0
900
JavaScriptでもディープラーニングってやつでなんとかして / Kyoto.js 15
spring_raining
2
2.1k
CSS組版の救世主 Vivliostyle / HTML5 Conference 2018
spring_raining
6
7.9k
印刷・出版のためのオンラインエディタ Viola / Viola - Online editor for printing and publishing
spring_raining
3
670
今こそCSS組版
spring_raining
5
2.4k
シン・サーバの形は。
spring_raining
0
310
クライアントサイドWebアプリはいいぞ
spring_raining
0
620
Other Decks in Technology
See All in Technology
コロプラのオンボーディングを採用から語りたい
colopl
5
940
Docker Desktop で Docker を始めよう
zembutsu
PRO
0
140
embedパッケージを深掘りする / Deep Dive into embed Package in Go
task4233
1
200
Oracle Base Database Service:サービス概要のご紹介
oracle4engineer
PRO
1
16k
テストを書かないためのテスト/ Tests for not writing tests
sinsoku
1
170
三菱電機で社内コミュニティを立ち上げた話
kurebayashi
1
350
GoogleのAIエージェント論 Authors: Julia Wiesinger, Patrick Marlow and Vladimir Vuskovic
customercloud
PRO
0
120
When Windows Meets Kubernetes…
pichuang
0
300
WantedlyでのKotlin Multiplatformの導入と課題 / Kotlin Multiplatform Implementation and Challenges at Wantedly
kubode
0
240
Bring Your Own Container: When Containers Turn the Key to EDR Bypass/byoc-avtokyo2024
tkmru
0
840
JAWS-UG20250116_iOSアプリエンジニアがAWSreInventに行ってきた(真面目編)
totokit4
0
130
月間60万ユーザーを抱える 個人開発サービス「Walica」の 技術スタック変遷
miyachin
1
120
Featured
See All Featured
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
38
1.9k
Building a Scalable Design System with Sketch
lauravandoore
460
33k
No one is an island. Learnings from fostering a developers community.
thoeni
19
3.1k
Facilitating Awesome Meetings
lara
51
6.2k
Learning to Love Humans: Emotional Interface Design
aarron
274
40k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.6k
How to train your dragon (web standard)
notwaldorf
89
5.8k
Build The Right Thing And Hit Your Dates
maggiecrowley
33
2.5k
Agile that works and the tools we love
rasmusluckow
328
21k
Faster Mobile Websites
deanohume
305
30k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Documentation Writing (for coders)
carmenintech
67
4.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 トランスパイラ