Vivliostyleで脚注のスタイルを変更する

CSS組版 Advent Calendar 2024 10日目の記事です。昨日はhidarumaさんでした。明日はきっとhidarumaさんです。先日12月4日のVivliostyle開発者会議で教わった、脚注のスタイルについて紹介します。

本記事投稿時点のVivliostyleでは、 @-adapt-footnote-areaというobsoletedな機能で脚注のスタイルを調整できます¹。

@page {
    size: A5;
}

.footnote {
    float: footnote;
    font-size: 80%;
    text-indent: 0;
}

::footnote-marker {
    content: "*" counter(footnote);
    margin-right: 1em;
}

::footnote-call {
    content: counter(footnote);
    font-size: 70%;
    position: relative;
    inset-block-start: -0.5em;
}

  @page {
      size: A5;
  }
  
  .footnote {
      float: footnote;
      font-size: 80%;
      text-indent: 0;
  }
  
  ::footnote-marker {
      content: "*" counter(footnote);
      margin-right: 1em;
  }
  
  ::footnote-call {
      content: counter(footnote);
      font-size: 70%;
      position: relative;
      inset-block-start: -0.5em;
  }
+ 
+ @-adapt-footnote-area ::before { 
+    border-block-start-style: dashed;
+    border-block-start-color: red;
+    border-block-start-width: 10px;
+    margin-inline-end: 0;
+ }

他のCSS組版システムへの移植性はなく、「InDesignで用意されたフォーマットにどうしても合わせたい」といった場合にやむなく使う程度に留めたほうがよいでしょう。手元の技術書を何冊か見る限り、幸いなことに脚注のスタイルはそれほど多様ではないようです。

1. https://github.com/vivliostyle/vivliostyle.js/issues/1045 ↩