学術出版㵞�HTML5標準化㩞�CSS組版��Scholarly HTML㩞�Vivliostyle

XMLパブリッシング交流会 2017‐02‐10 JAGAT XMLパブリッシング凖研究会

村上 真雄 (@MurakamiShinyu) ㈱ビブリオスタイル Founder & CTO 

目次1. はじめに～Web標準技術と出版の統合  3

2. Web標準を学術出版に ～ Scholarly HTMLとは  7

3. 構造化文書の共通語としてのHTML  9

4. HTMLをセマンティックに  11

5. 論文「宇宙論入門」のScholarly HTML化  15

6. CSS組版(Vivliostyle)によるページレイアウト  20

7. まとめ  24

目次 2

㷞�㉞�䛞�㯞�∼Web標準技術㩞�出版㵞�統合

はじめに～Web標準技術と出版の統合 3

https://www.w3.org/2017/01/pressrelease‐idpf‐w3c‐combination.html.ja から

はじめに～Web標準技術と出版の統合 4

発表者紹介㯞�⯞�⩞�㥞�、 W3C‐IDPF統合㵞�正式発表幞�嗞�柞�㵞�“Testimonials”⯞�䫞�

Vivliostyleは、W3CとIDPFの統合が電子出版をさらに進展させると考えています。当社は、HTML文書をページレイアウト表示するブラウザベースの出版ソフトウェアを開発しており、この統合を歓迎します。VivliostyleはW3CにおけるCSS開発に参加し、また当社のアドバイザーはIDPFにおけるEPUB開発に貢献してきました。私たちは、今後も標準化に貢献し続けます。

Shinyu Murakami, Founder and CTO, Vivliostyle Inc.株式会社ビブリオスタイル 会長兼CTO 村上 真雄

https://www.w3.org/2017/01/pressrelease‐idpf‐w3c‐combination.html.en#testimonials

❝

はじめに～Web標準技術と出版の統合 5

Web標準㩞�出版㵞�統合=“Web出版”標準化䉞�２つの標準化団体の連携によりWeb標準を使う電子出版(EPUB)が実現した

W3C (World Wide Web Consortium)

IDPF (International Digital Publishing Forum)

そしてW3Cへの統合、Webと出版の標準がひとつに

W3CとIDPF正式統合 ‐ 出版の未来形を描くロードマッピング「Web出版物」(Web Publication)の標準化へ 

オンラインでもオフラインでもシームレスに読めるWebサイトでもEPUBのようなパッケージ形式でも

はじめに～Web標準技術と出版の統合 6

Web標準佞�学術出版㯞� ∼Scholarly HTML㩞�㷞�

Web標準を学術出版に ～ Scholarly HTMLとは 7

Scholarly HTML=学術出版用㵞�HTML

学術論文をHTMLで表現する方法を標準化しようとしているW3CにScholarly HTMLコミュニティーグループ www.w3.org/community/scholarlyhtml/

ドラフト仕様: w3c.github.io/scholarly‐html/

仕様をまとめてるのはRobin Berjon: W3C HTML5仕様の元Editorで、現在は学術出版プラットフォーム(science.ai)開発者Tzviya Siegman: EPUB3.1仕様のEditorを務めるなどW3C・IDPFの標準化で中心的な一人。学術出版社Wileyの情報標準化リーダー

W3Cのコミュニティーグループであり正式なワーキンググループではないが、Web・電子出版の標準化で中心的な人たちが関わっているということ

Web標準を学術出版に ～ Scholarly HTMLとは 8

構造化文書㵞�共通語㩞�㇞�㥞�㵞�HTML

構造化文書の共通語としてのHTML 9

構造化文書形式㩞�㇞�㥞�HTML佞�使⥞�瑞�磞�敞�柞�ブラウザでそのまま表示できるWebアクセシビリティの標準のしくみが整備されてきている

普及しているWeb用のツール（HTMLエディタ、各種CMSなど）が使える

扱える人が多く学習コストが低いHTMLはもっとも普及している構造化文書形式であり、他とやりとりするのに「共通語」として便利

XHTML構文を使えばXMLのツールも使える（その必要がないなら緩いHTML構文でOK）

構造化文書の共通語としてのHTML 10

HTML佞�慞�狞�絞�曞�啞�敞�孞�㯞�

HTMLをセマンティックに 11

HTML5㧞�慞�狞�絞�曞�啞�敞�孞�㭞�文書構造化ⱞ�標準㯞�2014年にHTML5がW3C勧告、2016年には改訂版のHTML 5.1が勧告HTML5の新要素（section、article、nav、header、footer、aside、figure、figcaption 等）でセマンティックな文書構造が明確に

従来からのHTML要素もよりセマンティックな定義に

HTMLをセマンティックに 12

role属性㧞�HTML要素㯞�マ�䫞�㯞�意味佞�付加WAI‐ARIA：Webのアクセシビリティのためにセマンティックな情報をHTML要素にDPUB‐ARIA：出版のためのセマンティックな語彙を定義

Scholarly HTMLで使えるrole属性の語彙の例：

contentinfo（コンテンツ情報）doc‐abstract（要旨）

doc‐acknowledgments（謝辞）

doc‐appendix（付録）doc‐bibliography（参考文献）

doc‐conclusion（結論）doc‐endnote（後注）

doc‐footnote（脚注）

doc‐introduction（序論）doc‐subtitle（副題）

HTMLをセマンティックに 13

RDFa:慞�狞�絞�曞�啞�敞�孞�㭞�瑞�捞�情報佞�HTML㯞�埋䛞�込䙞�方法

RDFa = Resource Description Framework in Attributes

HTML5標準の要素とrole属性に加えてRDFaを利用することで、より詳細なメタ情報をHTML文書中に埋め込むことが可能に

Scholarly HTMLでは schema.org/ScholarlyArticle の語彙を利用

HTMLをセマンティックに 14

論文「宇宙論入門」㵞�Scholarly HTML化

論文「宇宙論入門」のScholarly HTML化 15

松原隆彦著「宇宙論入門」㯞�㡞�⡞�㥞�ウェブに公開されている、名古屋大学の松原隆彦著の「宇宙論：オリジナルテキスト」（名古屋大学大学院講義ノート、2002‐2006）※を、当研究会に参加している東京大学（名誉教授）の釜江常好が了承を得てScholarlyHTML化するサンプルとして利用。釜江が、幾つかの写真や図を追加し、テキストを少し編集。 ※http://tmcosmos.org/cosmology/cosmology‐web/

論文「宇宙論入門」のScholarly HTML化 16

Scholarly HTML狞�ߞ�孞�哞�敞�潞�指針Scholarly HTMLはまだ草案の段階で完成した仕様ではないので、仕様の細部にはこだわらずに簡略化したサブセットを使用原稿のTeX形式の数式入りのテキストデータから単純に変換できるよう、数式はTeX形式のままとして表示にMathJax（数式を表示するJavaScriptライブラリ）を利用。 ※Scholarly HTMLではWeb標準の数式記述方法であるMathMLを利用することになっているが、今回はそれにこだわらずTeX形式のままとした

論文「宇宙論入門」のScholarly HTML化 17

狞�ߞ�孞�哞�敞�潞�(捞�寞�付⻞�)方法㵞�⡞�䳞�⡞�䳞�研究会メンバーそれぞれが得意とする方法でやってみた

Markdown形式から pandoc利用でHTMLに変換

自動化スクリプト作成Excelのマクロを作成して自動変換

テキストエディタでタグ付け

論文「宇宙論入門」のScholarly HTML化 18

Scholarly HTML版「宇宙論入門」幞�絞�潞�神�公開GitHubリポジトリ: https://github.com/JAGAT‐XML‐publishing‐study‐group/cosmology

☞HTML通常表示版

☞ページレイアウト表示（Vivliostyle Viewer）

論文「宇宙論入門」のScholarly HTML化 19

CSS組版(Vivliostyle)㯞�䩞�䯞�烞�ߞ�忞�秞�嗞�哞�回�柞�

CSS組版(Vivliostyle)によるページレイアウト 20

CSSでページのレイアウトを指定して、Vivliostyle Viewerで表示

CSS組版(Vivliostyle)によるページレイアウト 21

Vivliostyle㵞�紹介印刷の世界と画面の世界を一元化

印刷物も様々な画面も ひとまとめで扱える

Webブラウザさえあれば使える 

HTMLとCSSだけ

オープンソース 

 github.com/vivliostyle/vivliostyle.js

CSS組版(Vivliostyle)によるページレイアウト 22

烞�ߞ�忞�㵞�組版㯞�役立㡞�CSS仕様日本語組版関係

段組 CSS Multi‐column Layout

ページのレイアウト※

※W3Cで標準化作業中の仕様であり、現時点で利用できる環境は限られる

縦書き CSS Writing Modes

文字組・禁則処理 CSS Text

装飾・圏点 CSS Text Decoration

ルビ配置 CSS Ruby

ページメディア CSS Paged Media

柱や相互参照等 CSS GeneratedContent

図版の配置 CSS Page Floats

CSS組版(Vivliostyle)によるページレイアウト 23

䕞�㩞�䛞�Web標準技術と出版の統合が進む学術論文をWeb標準のHTMLで表現しようというのがScholarly HTML

当研究会で実際の論文サンプルのScholarly HTML化に取り組んだhttps://github.com/JAGAT‐XML‐publishing‐study‐group/cosmology

HTML形式なのでブラウザでそのまま表示可能CSSでページレイアウトを指定して画面や印刷出力が可能（CSS組版）

Scholarly HTML仕様が完成して学術出版の標準形式として普及するのを期待

まとめ 24