-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathslide.html
119 lines (119 loc) · 10.3 KB
/
slide.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Vivliostyleプロジェクトの今までとこれから</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="Shinyu Murakami">
<link rel="stylesheet" href="theme-slide/theme.css">
</head>
<body>
<section class="level1 cover" id="vivliostyleプロジェクトのbr今までとこれから">
<h1 class="cover">Vivliostyleプロジェクトの<br>今までとこれから</h1>
<p>2022-11-20<br>Shinyu Murakami<br>Vivliostyle Foundation</p>
</section>
<section class="level1 toc" role="doc-toc" id="目次">
<h1 class="toc" role="doc-toc">目次</h1>
<ol>
<li><a href="#vivliostyle%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%81%AE%E4%BB%8A%E3%81%BE%E3%81%A7">Vivliostyleプロジェクトの今まで</a></li>
<li><a href="#vivliostyle%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%81%AE%E3%81%93%E3%82%8C%E3%81%8B%E3%82%89">Vivliostyleプロジェクトのこれから</a></li>
</ol>
</section>
<section id="vivliostyleプロジェクトの今まで" class="level1">
<h1>Vivliostyleプロジェクトの今まで</h1>
<section id="vivliostyle各プロジェクトの充実" class="level2">
<h2>Vivliostyle各プロジェクトの充実</h2>
<ul>
<li>Vivliostyle Pub、アルファ版公開！
<ul>
<li><a href="https://vivliostyle-pub-develop.vercel.app/">https://vivliostyle-pub-develop.vercel.app/</a></li>
</ul>
</li>
<li>Vivliostyle Themes スタイルテーマ</li>
<li>Vivliostyle CLI コマンドラインツール</li>
<li>VFM (Vivliostyle Flavored Markdown)</li>
<li>Vivliostyle.js CSS組版エンジン(Core)
<ul>
<li><a href="https://vivliostyle.org/viewer/#src=https://murakamishinyu.github.io/vivliostyle-dev2022autumn/slide.html&spread=false">Vivliostyle.jsにおけるWeb標準、CSSサポートの大改善</a></li>
</ul>
</li>
<li>Vivliostyle Viewer—CSS組版プレビュー、電子出版ビューア</li>
</ul>
</section>
</section>
<section id="vivliostyleプロジェクトのこれから" class="level1">
<h1>Vivliostyleプロジェクトのこれから</h1>
<section id="vfm-v2markdown拡張仕様の改良" class="level2">
<h2>VFM v2—Markdown拡張仕様の改良</h2>
<section id="セクション分けでの属性の扱いの仕様変更" class="level3">
<h3><a href="https://vivliostyle.github.io/vfm/#/ja/vfm#%E3%82%BB%E3%82%AF%E3%82%B7%E3%83%A7%E3%83%B3%E5%88%86%E3%81%91-sectionization">セクション分け</a>での属性の扱いの仕様変更</h3>
<p>VFM v1の次の仕様が廃止：</p>
<blockquote>
<ul>
<li>見出しの属性は基本的にセクションへコピーされます</li>
<li>id 属性はセクションに移動します</li>
</ul>
</blockquote>
<p>VFM v2の仕様では：</p>
<blockquote>
<ul>
<li>見出しの id 属性値をセクションの aria-labelledby 属性へ値をコピーします</li>
</ul>
</blockquote>
<p>例：</p>
<pre class="language-md"><code class="language-md"><span class="token title important"><span class="token punctuation">#</span> Welcome {.title}</span></code></pre>
<p>というMarkdownに対して、VFM v1で生成されるHTMLは</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>section</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>level1 title<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>welcome<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>title<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Welcome<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>section</span><span class="token punctuation">></span></span></code></pre>
<p>VFM v2では</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>section</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>level1<span class="token punctuation">"</span></span> <span class="token attr-name">aria-labelledby</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>welcome<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>title<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>welcome<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Welcome<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>section</span><span class="token punctuation">></span></span></code></pre>
<section id="仕様変更理由" class="level4">
<h4>仕様変更理由</h4>
<p>VFM v1で、見出しに指定された属性を、HTMLの見出し要素(h1-h6)だけでなく自動生成されるsection要素にも重複して出力（ただしidはsectionのみに出力）していたのは次の理由：</p>
<ul>
<li>参考にした<a href="https://pandoc.org/MANUAL.html#option--section-divs">Pandocの --section-divs オプション</a>の仕様から。</li>
<li>CSSでsectionに対してスタイル指定したいとき、sectionにidやclass属性がないと不便だったため。</li>
</ul>
<p>しかしこの仕様では、見出しだけに指定したいスタイルがsection全体にも適用されてしまう問題があり、これも不便。</p>
<p>CSSで <code>:has()</code> 擬似クラスが使えるようになったことにより、「sectionにidやclass属性がないと不便」は解消されてる。</p>
<p>例：見出しのclass名が "title" であるsectionのスタイルを指定</p>
<pre class="language-css"><code class="language-css"><span class="token selector">section<span class="token pseudo-class">:has</span><span class="token punctuation">(</span><span class="token combinator">></span> <span class="token class">.title</span><span class="token punctuation">)</span></span> <span class="token punctuation">{</span>
...
<span class="token punctuation">}</span></code></pre>
<p>したがって、これまでの仕様の利点はなくなったので廃止。Markdownの見出しに指定した属性はHTMLの見出し要素にだけ出力という分かりやすい仕様に。詳しくは <a href="https://github.com/vivliostyle/vfm/issues/151">VFM issue #151</a>。</p>
<p>ほかにも仕様改良予定あり。<a href="https://github.com/vivliostyle/vfm/issues">VFM issues</a> をご覧ください。</p>
</section>
</section>
</section>
<section id="vivliostyle-cli-v6" class="level2">
<h2>Vivliostyle CLI v6</h2>
<p>VFMがv1からv2にメジャーバージョンアップ（非互換な仕様変更あり）となるので、それを使っているVivliostyle CLIも現在のv5からv6へとバージョンアップすることになります。</p>
<p>これからの課題: <a href="https://github.com/vivliostyle/vivliostyle-cli/issues">Vivliostyle CLI issues</a>から</p>
<ul>
<li><a href="https://github.com/vivliostyle/vivliostyle-cli/issues/55">EPUB生成をサポート</a></li>
<li><a href="https://github.com/vivliostyle/vivliostyle-cli/issues/99">カバー画像のサポート</a></li>
<li><a href="https://github.com/vivliostyle/vivliostyle-cli/issues/162">テーマをカスタマイズしやすくする</a></li>
<li>など</li>
</ul>
</section>
<section id="themes-のスタイルシートの刷新" class="level2">
<h2>Themes のスタイルシートの刷新</h2>
<p>CSS変数を活用して、よりカスタマイズがしやすいように</p>
<ul>
<li><a href="https://github.com/vivliostyle/themes/pull/103">feat: Create base theme</a> (Draft pull request)</li>
</ul>
</section>
<section id="vivliostyle-pub" class="level2">
<h2>Vivliostyle Pub</h2>
<p>Vivliostyle.js組版エンジンと、VFM、CLI、Themesのアップデートは、もちろんVivliostyle Pubに反映されます！</p>
<p>Vivliostyle Pubの課題：</p>
<ul>
<li><a href="https://github.com/vivliostyle/vivliostyle-pub/issues/218">ベータ版公開までのTo Do（開発）</a></li>
</ul>
</section>
</section>
</body>
</html>