Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

epub:type="footnote"を指定した脚注について #1363

Closed
Yuki-book opened this issue Jul 12, 2024 · 3 comments · Fixed by #1365
Closed

epub:type="footnote"を指定した脚注について #1363

Yuki-book opened this issue Jul 12, 2024 · 3 comments · Fixed by #1365
Labels

Comments

@Yuki-book
Copy link

Vivliostyle初心者です。
EPUB原稿を流用してVivliostyleでCSS組版を勉強しています。

EPUB形式の脚注(epub:type="footnote")をVivliostyleがサポートしているか検索してみましたが、説明をみつけることができませんでした。
脚注を記述してプレビューすると脚注欄に出力できたのですが、本文内にも出力されてしまいました。

バグか仕様外の使い方なのかわかりません。

vivliostyle --versionは、以下です。
cli: 8.12.1
core: 2.30.1

現象の説明

構成ファイル

test.xhtmlとmystyle.cssで構成しています。
test02.zip

【test.xhtml】

AAA
<a id="fnref1" href="#fn1" class="noteref" epub:type="noteref">*1</a>
は、・・・です。

<div id="fn1" class="footnote" epub:type="footnote" >
<p class="foottext">
<a href="#fnref1">(☆)</a> [*1] AAA設計図は、・・・です。
</p>
</div>

【mystyle.css】

@page {}、body {}、p {}、h1,h2 {}の定義のみで脚注に関する定義はしておりません。

プレビュー

vivliostyle previewコマンドでプレビューすると以下のように表示します。

fig

脚注の本文が①脚注を定義した位置と②ページ下の脚注欄に出力してしまいます。
①の位置の出力を消す方法はないでしょうか?

また、EPUB形式の脚注(epub:type="footnote")は正式にサポートしている仕様でしょうか?

@Yuki-book Yuki-book added the bug label Jul 12, 2024
@MurakamiShinyu
Copy link
Member

EPUB形式の脚注(epub:type="footnote")をVivliostyleがサポートしているかについて、たしかにどこにも説明がないのですが、脚注として機能するようになっています。ただし、 epub:type="footnote" を指定する要素は <aside> 要素である必要があります。

epub:type="footnote"<aside> 要素に指定したサンプル:
https://gist.githubusercontent.com/MurakamiShinyu/24fc3da61ed5a603f688b59ae15819bd/raw/epub-type-footnote-aside.xhtml

Test:
https://vivliostyle.org/viewer/#src=https://gist.githubusercontent.com/MurakamiShinyu/24fc3da61ed5a603f688b59ae15819bd/raw/epub-type-footnote-aside.xhtml

<aside> 要素に epub:type="footnote" を指定する仕様については、EPUB 3 Structural Semantics Vocabulary 仕様の次のところを参照してください:
https://www.w3.org/TR/epub-ssv-11/#footnote

HTML usage context: On the aside element when identifying a single footnote, or on descendants of sectioning content when identifying individual footnotes in a group (refer to footnotes and endnotes).

この仕様によると、epub:type="footnote"aside に指定するほかに、footnotesendnotes のセクションの子孫要素にも指定することができるということなのですが、Vivliostyle.jsでは aside 以外に指定すると脚注欄と本文内に重複して出力されてしまう問題があります。

ちなみに、Vivliostyle.jsでの epub:type="footnote" のサポートは、もともとVivliostyle.jsの前身である EPUB Adaptive Layout(EPUB3の拡張として提案された仕様)の実装 https://github.com/sorotokin/adaptive-layout からのものです。

ほかのEPUBリーダー実装では epub:type="footnote" の扱いはどうなのかと検索してみると、Apple Booksのドキュメントの「ポップアップ形式の脚注」がありました:
https://help.apple.com/itc/booksassetguide/ja.lproj/itccf8ecf5c8.html

これを読むと、

<aside> 要素には footnoteepub:type があるため、そのテキストは、ブックの本文内では非表示になります。 テキストは、ポップアップのコンテキスト内でのみ読み手に見えるようになります。

注記: EPUB 3 のブックにポップアップ形式の脚注を追加する際に、<aside> エレメントを、<div> エレメントまたは <p> エレメントに置き替えることができます。脚注を非表示にする場合は、<aside> エレメントを使用し、通常の読書ビューに脚注を表示する場合は、<div> エレメントまたは <p> エレメントを使用します。<div> または <p> を使用した場合、ユーザが脚注のリンクをクリックすると、コンテンツがポップアップ形式で表示され、脚注もページ上のテキストの一部として表示されます。

ということで、<aside> 要素に epub:type="footnote" があるときだけ、本文内では非表示になってポップアップ形式の脚注になり、<div> または <p> にあるときは、本文内で普通に表示されるということです。

これにならって、<aside> 要素に epub:type="footnote" があるときだけ脚注欄に表示して、他の要素に epub:type="footnote" があるときには、脚注欄には表示しないで、本文内で普通に表示されるだけになるように、Vivliostyle.jsの実装を直すべきだろうと思います。

@Yuki-book
Copy link
Author

丁寧な説明をしていただき、ありがとうございます。

EPUB形式の脚注(epub:type="footnote")をVivliostyleがサポートしているとのことで安心しました。

epub:type="footnote"<aside> 要素に入れることで、本文内で非表示で脚注欄のみに表示できました。
これで、私が意図していた脚注が作成できます。

Vivliostyleで使用するCSSは、奥が深いですね。少しずつ、勉強してゆきます。

@MurakamiShinyu
Copy link
Member

これにならって、<aside> 要素に epub:type="footnote" があるときだけ脚注欄に表示して、他の要素に epub:type="footnote" があるときには、脚注欄には表示しないで、本文内で普通に表示されるだけになるように、Vivliostyle.jsの実装を直すべきだろうと思います。

PR #1365 で、そのように修正しました。

テスト1:epub:type="footnote"<div> にある場合

HTML: https://gist.githubusercontent.com/MurakamiShinyu/24fc3da61ed5a603f688b59ae15819bd/raw/epub-type-footnote-div.xhtml

修正前(v2.30.1): https://vivliostyle.github.io/viewer/v2.30.1/#src=https://gist.githubusercontent.com/MurakamiShinyu/24fc3da61ed5a603f688b59ae15819bd/raw/epub-type-footnote-div.xhtml

修正後:
https://vivliostyle-git-fix-issue1363-vivliostyle.vercel.app/#src=https://gist.githubusercontent.com/MurakamiShinyu/24fc3da61ed5a603f688b59ae15819bd/raw/epub-type-footnote-div.xhtml

修正前は脚注が本文内と脚注欄の両方に表示されたが、修正後は本文内にだけ表示されるようになった。

テスト2:epub:type="footnote"<aside> にある場合

HTML: https://gist.githubusercontent.com/MurakamiShinyu/24fc3da61ed5a603f688b59ae15819bd/raw/epub-type-footnote-aside.xhtml

修正前(v2.30.1): https://vivliostyle.github.io/viewer/v2.30.1/#src=https://gist.githubusercontent.com/MurakamiShinyu/24fc3da61ed5a603f688b59ae15819bd/raw/epub-type-footnote-aside.xhtml

修正後:
https://vivliostyle-git-fix-issue1363-vivliostyle.vercel.app/#src=https://gist.githubusercontent.com/MurakamiShinyu/24fc3da61ed5a603f688b59ae15819bd/raw/epub-type-footnote-aside.xhtml

修正前も修正後も脚注欄にだけ脚注が表示される。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
2 participants