VFMで学会論文を書いてVivliostyleで組んで投稿する［後編］

前半に続いて、論文でよく見られるレイアウトをCSSで実現する方法を解説します。

数式

TeX形式の数式が使えます。インラインの数式は$〜$で、別行立て数式は$$〜$$で囲みます。このほか、MathML形式の数式（<math>〜</math>）も利用可能です。

sample12.md

---
lang: 'ja'
---
インラインの数式: $E=mc^2$。

インラインの数式: $\frac{分子}{分母}$。

別行立て数式（別行数式、ディスプレイ数式）: $$\frac{分子}{分母}$$

ちなみに、HTMLではインラインの数式は$〜$の代わりに$ と $で囲みます。これは数式表示に利用されているMathJaxのデフォルトの設定によるものです。

<p>インラインの数式: <span data-math-typeset="true">\(E=mc^2\)</span>。</p>
<p>インラインの数式: <span data-math-typeset="true">\(\frac{分子}{分母}\)</span>。</p>
<p>別行立て数式（別行数式、ディスプレイ数式）: <span data-math-typeset="true">$$\frac{分子}{分母}$$</span>。</p>

数式番号

別行立て数式（別行数式、ディスプレイ数式）に番号を付けてみましょう。数式に付けた番号を本文から参照できます。

sample13.css

:root {
  counter-reset: equation 0;
}
.equation {
  counter-increment: equation;
  display: grid;
  grid-template-columns: auto 3rem;
  break-inside: avoid;
  align-content: center;
  align-items: center;
}
.equation > [data-math-typeset] {
  justify-self: center; /* 中央揃え */
}
.equation::after {
  content: "(" counter(equation) ")";
  justify-self: end; /* 末尾（右）揃え */
}
a.eqref::before {
  content: "(" target-counter(attr(href url), equation) ")";
}

sample13.md

---
lang: 'ja'
link:
  - rel: 'stylesheet'
    href: 'sample13.css'
---
…を数式[](#eq01){.eqref}に示す。

<div class="equation" id="eq01"><span data-math-typeset="true">$${\displaystyle G_{\mu \nu }+\Lambda g_{\mu \nu }=\kappa T_{\mu \nu }}$$</span></div>

この例では、equationクラスのdiv要素で数式を囲んで、このdivの後ろ（.equation::after擬似要素）に番号を生成しています。このdivはグリッドレイアウト（Grid Layout）にすることで数式と数式番号を横に並べています。grid-template-columns: auto 3rem;とすることで、左から2番目の数式番号を3emという固定幅にしています。また、数式を中央（center）揃え、数式番号を右（end）揃えにしてます。

参考文献

参考文献を論文の最後の方にまとめて書いて、文献の先頭に番号を自動生成して、さらに、それらを本文から参照して、自動生成された番号を本文にも自動挿入できます。章節や図表の番号と同じです。

sample16.css

:root {
  counter-reset: reference 0;
}
.reference {
  counter-increment: reference;
}
.reference::before {
  content: "[" counter(reference) "]";
}
.cite::after {
  content: "[" target-counter(attr(href url), reference) "]";
}

sample16.md

---
lang: 'ja'
link:
  - rel: 'stylesheet'
    href: 'sample16.css'
---
## 見出し

本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文[](#ref01){.cite}。

## 参考文献

<p id="ref01" class="reference">文献 文献 文献 文献 文献 文献 文献 文献 文献 文献</p>

後注（文末脚注）も同様に実現できます。各文献にidを付ける必要があるので、タグpを付けることになります。

章節⁠、図表⁠、参考文献⁠、所属などの番号を参照する⁠。

章節や図表の番号は、ブラウザでも以前から自動生成できました。最新のCSS、そしてVivliostyleでは、自動生成した番号と同じ番号を、別の場所にも生成できます。例えば、本文中の「図3の左側は…」の「3」を、図番号の変更に自動的に合わせて生成できます。

これを実現するには次のようにします：

参照先の章節の見出し（h2要素など）や、図表（figure要素など）にid属性を付けます。
参照元をa要素として、参照先のidをhref属性に指定し、a要素の疑似要素のcontentプロパティの値でtarget-counter()関数を使ってcounterの値を取得します。

図表番号

まずは図表番号の例です。

sample03-1.css

:root {
  counter-reset: figure 0;
}
figure {
  counter-increment: figure;
}
figcaption::before {
  content: "図" counter(figure) " ";
}
.fig-ref::after {
  content: "図" target-counter(attr(href url), figure);
}
.dummy-figure {
  block-size: 10vh;
  inline-size: 80%;
  border: thin solid blue;
  display: grid;
  place-items: center;
}
.dummy-figure::before {
  content: "図の中身";
}

sample03-1.md

---
lang: 'ja'
link:
  - rel: 'stylesheet'
    href: 'sample03-1.css'
---
<figure id="fig01">
  <div class="dummy-figure"></div>
  <figcaption>キャプション1</figcaption>
</figure>

![キャプション2](process.svg){.fig #fig02 style="height: 20vh;"}

<figure id="fig03">
  <div class="dummy-figure"></div>
  <figcaption>キャプション3</figcaption>
</figure>

[](#fig01){.fig-ref}は…。[](#fig02){.fig-ref}は…。[](#fig03){.fig-ref}は…

{.fig-ref}は生成した要素（ここではa要素）にfig-refクラスを設定するVFMの記法です。[](#fig01){.fig-ref}は<a href="#fig01" class="fig-ref"></a>というHTMLに変換されます。

Markdown（VFM）で挿入した図process.svgのidはimg要素に設定されるのですが、キャプションにも、本文中の図参照にも正しい図番号が生成されていることに注目してください。つまり、この方法は「idで指定した要素に生成された番号文字列を取得」するのではなく「同じカウンターを取得して、図表番号と、本文中の図表番号参照とをそれぞれ生成」します。

章節番号

続いて、章節番号の例です。

sample03-2.css

:root {
  counter-reset: chapter 0 section 0 subsection 0;
}
h2 {
  counter-increment: chapter;
}
h2::before {
  content: counter(chapter) " ";
}
.chap-ref::after {
  content: target-counter(attr(href url), chapter) "章";
}
h3 {
  counter-increment: section;
}
h3::before {
  content: counter(chapter) "." counter(section) " ";
}
.sec-ref::after {
  content: target-counter(attr(href url), chapter) "." target-counter(attr(href url), section) "節";
}

sample03-2.md

---
lang: 'ja'
link:
  - rel: 'stylesheet'
    href: 'sample03-2.css'
---
## 見出し{#chap01}

本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文。

## 見出し{#sec01-01}

本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文。

## 見出し{#sec01-02}

[](#chap01){.chap-ref}の[](#sec01-01){.sec-ref}では…。

本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文。

[](#chap01){.sec-ref}という参照は失敗。

{#chap01}は生成した要素（ここではh2要素）にid属性を設定する記法です。ここでは<h2 id="chap01">見出し</h2>というHTMLに変換されます。

h3要素の前に自動的に生成する番号だけでなく、それを参照するa.sec-ref要素の後に自動生成する番号でも、chapterとsectionという2つのカウンター（counter）を明示的に指定します。

ここでも注意が必要です。この方法は「生成された番号を取得」するのではなく「同じカウンターを取得して、章番号と、本文中の章番号参照とをそれぞれ生成」します。論文の筆者は、章節項番号の参照を挿入するときに、参照先がh2なのかh3なのかh4なのか…を確かめます。参照元の見出しのラベルが上下したら、本文中でその番号を参照しているa要素のクラスも合わせて変えます。上の例では失敗例も含んでいて、参照先がh2でカウンターchapterが対応するのに<a class="subsec-ref"></a>を挿入してしまい、本文中におかしな番号が生成されます。

これを自動的に調整してくれるエディターがあれば便利でしょう。とりあえずはlint機能があればいいですね、ページ内フラグメントへのリンクと、リンク先要素の要素名とをペアで一覧表示してくれるだけでも役に立ちそうです。

本文からの最初の参照を太字にする

本文中の最初の参照を太字にするよう求められることがあります。該当する要素に2つ以上のクラスを設定することで実現できます。

sample03-3.css

:root {
  counter-reset: figure 0;
}
figure {
  counter-increment: figure;
}
figcaption::before {
  content: "図" counter(figure) " ";
}
.fig-ref::after {
  content: "図" target-counter(attr(href url), figure);
}
.fig-ref.first-ref {
  font-weight: bold;
}
.dummy-figure {
  block-size: 25vh;
  inline-size: 80%;
  border: thin solid blue;
  display: grid;
  place-items: center;
}
.dummy-figure::before {
  content: "図の中身";
}

sample03-3.md

---
lang: 'ja'
link:
  - rel: 'stylesheet'
    href: 'sample03-3.css'
---
<figure id="fig01">
  <div class="dummy-figure"></div>
  <figcaption>キャプション</figcaption>
</figure>

[](#fig01){.fig-ref .first-ref}は…。[](#fig01){.fig-ref}は…

VFMで2つ以上のクラスを設定するときは、{.fig-ref .first-ref}のように書きます。{.fig-ref.first-ref}や{.fig-ref, .first-ref}ではありません。

CSSには「文書中での最初の出現」といったセレクターはありません。:first-child擬似クラスは兄弟要素の中での最初の要素を表します。.first-refクラスは手動で設定するか、何らかのプログラムで設定する必要があります。

クラス名やidの値⁠、そしてLaTeXのラベル

参照を生成する[](#chap01){.chap-ref}の[]部分には何も書いてないので、Markdownのビューアで見るとクラスを設定する{.fig-ref}しか表示されません。これは章・節番号、表番号、参考文献番号の参照でも同様です。

図表、章・節、参考文献それぞれの番号を参照するクラス名を、図番号はfig-とするなどとして、少なくとも参照先の種類が分かるようにしておくと編集・運用するうえで安心です。これはidも同様です。LaTeXでもラベル名を、図のラベルにはfig:を付けてfig:01、表のラベルはtab:01、数式のラベルはeq:energyなどと系統的に付ける慣習があります。

先の話になりますが、論文をVFMとHTMLとLaTeXの形式の間で相互に変換して運用することを想定すると、LaTeXのラベルをHTMLのid属性として扱うと処理しやすいです。そこで、ラベルとid属性の値に、LaTeXとHTMLのどちらでも使える文字を使っておくと便利です。また、そのように処理系が実現されていると嬉しいです。

著者⁠、所属

著者と所属や現所属との対応

著者の所属（affiliation）と現所属（present affiliation）は、著者と多対多の関係にあって、論文では記号・番号で対応付くように表示します。このような、自動生成される番号と同じ番号を他の要素でも自動生成するには、生成するコンテンツにtarget-counter()関数などを使います。

sample04.css

:root {
  counter-reset: affiliation 0 present-affiliation 0;
}
.affi {
  counter-increment: affiliation;
}
.affi::before {
  content: "*" counter(affiliation);
}
.paffi {
    counter-increment: present-affiliation;
}
.paffi::before {
    content: "†" counter(present-affiliation);
}
.paffi-pre::after {
  content: "現在、";
}
a.affi-ref::before {
    content: "*" target-counter(attr(href url), affiliation);
}
a.paffi-ref::before {
    content: "†" target-counter(attr(href url), present-affiliation);
}

.affi::before, .paffi::before, .affi-ref, .paffi-ref {
  font-size: 0.7rem;
  position: relative;
  inset-block-start: -0.5rem;
}
.affi-ref, .paffi-ref {
  color: black;
  text-decoration: none;
}

sample.04.md

---
lang: 'ja'
link:
  - rel: 'stylesheet'
    href: 'sample04.css'
---

著者A[](#affix){.affi-ref}, 著者B[](#affiy){.affi-ref}, 著者C[](#affix){.affi-ref},[](#paffiz){.paffi-ref}

<div id="affix" class="affi">所属X</div>
<div id="affiy" class="affi">所属Y</div>
<div id="paffiz" class="paffi"><span class="paffi-pre"></span>所属Z</div>

著者の英語表記のスモールキャップ

著者の英語表記をスモールキャップ（small caps）にすることがあります。これはCSSのfont-variant-capsプロパティにsmall-capsと設定することで実現できます。

sample25.css

h2.author {
  display: none;
}
section:has(> .author) > p {
  display: inline;
}
section:has(> .author:lang(en)) > p {
  font-variant-caps: small-caps;
}
section:has(> .author) > p:not(:first-of-type) {
  margin-inline-start: 1rem;
}

sample25.md

---
lang: 'ja'
link:
  - rel: 'stylesheet'
    href: 'sample25.css'
---
## 著者{.author}

著者1

著者2

著者3

## 著者{.author lang="en"}

Example Author 1

Example Author 2

Example Author 3

図8 sample25のスクリーンショット。英語表記が、Markdownでは小文字だった部分がスモールキャップになっている。

脚注

脚注もできます。

最初に、CSS Generated Content for Paged Media Moduleの図「Footnote terminology」で用語を確認しておくとよいです。「⁠脚注本体（footnote body⁠）⁠」⁠、「⁠脚注マーカー（footnote marker、footnote numberあるいは脚注番号⁠）⁠」⁠「⁠脚注コール（脚注呼び出し、footnote call、footnote referenceあるいは脚注参照⁠）⁠」といった用語です。

ページ脚注（page footnote）

脚注をページの下に表示するには、CSSが用意している仕組みを使います。脚注本体をspan要素などで囲んで任意にクラス名を付けて、そのクラス名に対してCSSでfloat: footnote;を指定します。

sample05.css

:root {
    counter-reset: footnote 0;
}
.fn-text {
    float: footnote;
    counter-increment: footnote;
}
::footnote-marker {
    content: "*" counter(footnote) " ";
}
::footnote-call {
    content: "*" counter(footnote);
    font-size: .7rem;
    position: relative;
    inset-block-start: -0.5rem;
}

sample05.md

---
lang: 'ja'
link:
  - rel: 'stylesheet'
    href: 'sample05.css'
---
アプリケーションはWAI-ARIA<span class="fn-text">Web Accessibility Initiative – Accessible Rich Internet Applications</span>を採用している。

なお、この例では書き手としては「WAI-ARIA」ということばに注を付けていますが、「⁠WAI-ARIA」部分は脚注の仕組みの外側にあります。Microsoft WordやLaTeXと同じです。

1つの脚注本体を複数の部分から参照できます。章節や図表の番号を参照するのと同じ方法です。Microsoft Wordも同じことができます。

sample06.css

:root {
  counter-reset: footnote 0;
  column-count: 2;
  column-gap: 2rem;
  column-fill: auto;
}
.fn-text {
  float: footnote;
  counter-increment: footnote;
  padding-inline-start: 2rem;
  text-indent: -2rem;
}
::footnote-marker {
  content: "*" counter(footnote) " ";
  width: 2rem;
  margin-inline-end: 1rem;
}
::footnote-call {
  content: "*" counter(footnote);
  font-size: .7rem;
  position: relative;
  inset-block-start: -0.5rem;
}
.fn-ref {
  text-decoration: none;
}
.fn-ref:link, .fn-ref.visited, .fn-ref:hover {
  color: currentcolor;
}
.fn-ref::after {
  content: "*" target-counter(attr(href url), footnote);
  font-size: .7rem;
  position: relative;
  inset-block-start: -0.5rem;
}

sample06.md

---
lang: 'ja'
link:
  - rel: 'stylesheet'
    href: 'sample06.css'
---
本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文。

アプリケーションはWAI-ARIA<span class="fn-text" id="fn1">[Web Accessibility Initiative – Accessible Rich Internet Applications](https://www.w3.org/TR/html-aria/). Xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx.</span>を採用している。…同じ脚注を再び参照[](#fn1){.fn-ref}。

<p style="break-before: column;">この段落の前で、段を区切るように設定されています。</p>

本文<span class="fn-text" id="fn2">2つ目の脚注</span> 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文。

CSSの脚注では、本文が2段組の場合は、いくつかの脚注本体がまとまってページの下に段抜きで表示されます。このまとまりはシステムが自動的に作ります。

段脚注（column footnote）

段の下に脚注を表示する仕組みは、CSSにまだありません。そこで、前に説明した「横に並ぶ小さな図表」や「図表番号の参照」などと同じ方法を使います。小さな図表のそれぞれが脚注本体、図表の参照が脚注コールです。

sample23.css

:root {
  counter-reset: footnote 0;
  column-count: 2;
  column-gap: 2rem;
  column-fill: auto;
}
.fn-text {
  counter-increment: footnote;
  display: block;
  padding-inline-start: 2rem;
  text-indent: -2rem;
}
.fn-text::before {
  content: "*" counter(footnote);
  display: inline;
  width: 2rem;
  text-align: left;
  padding: 0;
  margin-inline-end: 1rem;
}
.fn-area {
  float: block-end;
  float-reference: column;
  border-block-start: thin solid currentcolor;
}
.fn-call::before {
  content: "*" target-counter(attr(href url), footnote);
  font-size: .7rem;
  position: relative;
  inset-block-start: -0.5rem;
}

sample23.md

---
lang: 'ja'
link:
  - rel: 'stylesheet'
    href: 'sample23.css'
---
本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文。

アプリケーションはWAI-ARIA[](#fn-01){.fn-call}を採用している[](#fn-01){.fn-call}、[](#fn-02){.fn-call}。

<section class="fn-area">
  <div class="fn-text" id="fn-01"><a href="https://www.w3.org/TR/html-aria/">Web Accessibility Initiative – Accessible Rich Internet Applications</a>. Xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx.</div>
  <div class="fn-text" id="fn-02">2つ目の脚注</div>
</section>

本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文。

<p style="break-before: column;">この段落の前で、段を区切るように設定されています。</p>

この方式では、fn-areaクラスのsection要素にまとめた脚注本体が、そのまとまりの単位で段の下に表示されます。脚注本体のまとまりは自分が作ります。複数のまとまりが1つ段に表示されないようになどの調整を自分で行います。図表の配置を調整するのと同様です。

論文番号を柱（ランニングヘッド）に表示する⁠。

発表/投稿を申し込んで受理されると発表番号/論文番号が付与されて、その番号を柱（ランニングヘッド）に表示するように求められることがあります。

次の例のCSSでは、ページの右上@top-rightに論文番号を生成しています。論文の番号はarticle-numberという名前の付いた文字列に設定されているので、contentプロパティの値の中でstring()関数で参照します。論文番号をarticle-numberに設定しているのはarticle-idクラスの要素に設定したstring-setプロパティです。

sample17.css

@page {
  @top-right {
      content: "論文番号 " string(article-number);
  }
}
.article-id {
  string-set: article-number content();
  display: none;
}

sample17.md

---
lang: 'ja'
link:
  - rel: 'stylesheet'
    href: 'sample17.css'
---
# タイトル タイトル タイトル #

<div class="article-id">IS-24-1234</div>

本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文。

content: "論文番号 " string(article-number);ではなく、content: "論文番号 IS-24-1234";としておけば、同じ結果になりますが、そのCSSはその論文でしか使えません。string()を使うことで、同じCSSを他の論文でも使えます。この方法では、classがarticle-idの要素自身は表示されないようにdisplay: none;と設定しておきます。

サイズや向きが異なるページを挿入する

図表が大きくて、サイズや向きが異なるページを途中に挿入して、そこに表示したくなることあります。Named pageという仕組みを使うとできます。次の例のCSSでは、@page a3-landscapeによってa3-landscapeという名前のページを導入して、サイズをA3縦（landscape）に設定しています。さらにa3-landscapeというクラスを用意して、そのクラスの要素をa3-landscapeという名前のページに配置します。A3縦のページに置きたい図figureにはa3-landscapeクラスを設定します。

sample18.css

@page {
  size: A4 portrait;
  @bottom-center {
      content: counter(page);
  }
}
@page a3-landscape {
  size: A3 landscape;
  @bottom-center {
    content: counter(page);
  }
}
.a3-landscape {
  page: a3-landscape;
}
.dummy-figure {
  block-size: 15cm;
  inline-size: 80%;
  border: thin solid blue;
  display: grid;
  place-items: center;
}
.dummy-figure::before {
  content: "図の中身";
}

sample18.md

---
lang: 'ja'
link:
  - rel: 'stylesheet'
    href: 'sample18.css'
---
1 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文

<figure>
  <div class="dummy-figure"></div>
  <figcaption>1 キャプション</figcaption>
</figure>

2 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文

<figure class="a3-landscape">
  <div class="dummy-figure"></div>
  <figcaption>2 キャプション</figcaption>
</figure>

3 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文

<figure>
  <div class="dummy-figure"></div>
  <figcaption>3 キャプション</figcaption>
</figure>

4 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文

<figure class="a3-landscape">
  <div class="dummy-figure"></div>
  <figcaption>4 キャプション</figcaption>
</figure>

5 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文

サイズが異なるページがはさまっていてもページ番号は通しになっていることや、ページ番号の位置や向きを確認してみてください。これは変えることができます。

また、本文と図のソース上の順番と、ページ上の順番も確認してください。

順序付き（番号付き）箇条書き⁠、参考文献などの番号

本文中の箇条書きはそうでもありませんが、本の最後にまとめられる後注や参考文献の一覧では、注番号や文献番号が3桁になることもあります。このような番号部分（順序ラベル）のスタイルは様々です。ここでは、次の図のようなスタイルを実現する例をあげます。このスタイルは次にようになっています：

番号は左揃え
番号の桁数が大きくなると箇条項目本体の領域に食い込むが、本体はそれをよけて重ならない。
本体は左揃え。番号の桁数が同じなら揃ってみえる。先頭に"（"や"「"などがあっても、文字の前の空白が視覚的に削られて、左に揃ってみえる。

これを実現するCSSの例は次のようなものです：

sample27.css

:root {
  text-align: justify;
  text-spacing: auto;
  /*
  border-inline-start: thin solid purple;
  */
  column-count: 2;
  column-gap: 2em;
  column-fill: auto;
}
ol {
  list-style-type: none;
  counter-reset: custom-counter 0;
  margin-block: 0;
  --list-padding: 2em;
  padding-inline-start: var(--list-padding);
  /*
  border-inline-end: thin solid purple;
  */
}
ol > li {
  counter-increment: custom-counter;
  display: flow-root; /* 本体が空のときに項目が潰れないように */
}
ol > li::before {
  float: left;
  break-after: avoid; /* 番号と本体とが別段や別ページに別れないように */
  margin-inline-start: calc(-1 * var(--list-padding));
  min-inline-size: var(--list-padding);
  content: "（" counter(custom-counter) "）"; /* 全角の括弧 */
  /*
  border-inline-end: thin solid purple;
  */
}
p {
  text-indent: 1em;
  margin-block: 0;
}

Markdownの例は番号の桁数を大きくするために項目数が多くなっています。

sample27.md

---
lang: 'ja'
link:
  - rel: 'stylesheet'
    href: 'sample27.css'
---
ああああああ（あああ）。「ああああああああああ。ああああああああああ。」

「あああ」あああ（あああ）。「ああああああああああ。ああああああああああ。」

1. 番号の括弧は全角、本文の括弧も全角。
2. 「あああ」あああ（あああ）。ああああああああああ。あああああああああああああああああああ。
3. （あああ）あああ（あああ）。「（あああああああああああああああああああ、ああああああああああ）。」あああああああ。
4. 「あああ」あああ（あああ）。「ああああああああああ。ああああああああああ。あああああああああああああああああああ。」
5. あああああああああああああああああああ。
6. あああああああああああああああああああ。

<!-- 長いので省略 -->

1. あああああああああああああああああああ。
1. あああああああああああああああああああ。
1. あああああああああああああああああああ。

ああああああ（あああ）。「ああああああああああ。ああああああああああ。」

「あああ」あああ（あああ）。「ああああああああああ。ああああああああああ。」

この例では、番号部分にfloat: left;と設定して左側に沿うように配置し、本体が右側に回り込むようにしています。また、min-inline-sizeプロパティを設定して、番号の桁数が小さいときには本体と間隔が空くようにしています。CSSでコメントアウトしてある境界線（border）を復活させると、仕組みが分かりやすくなると思います。text-spacing: auto;は、括弧など約物（及び日欧文字間）の詰めを制御する設定で、本体の左側が揃うようにしています。

項目数が多いので、column-count: 2;で本文を2段組にしてページ数を減らしています。プレビューのウィンドウを縦横に広げたり縮めたりして、揃えなどを確かめてみてください。

Markdown⁠、HTML⁠、LaTeX⁠、Word…

この記事の範囲を超える話題となりますが、論文のライフサイクルを追いかけると、内容は全く同じでも、紙面上の配置やデータフォーマットが変わることがあります。

例えば、ある研究会に投稿・発表した論文を、別の研究会や雑誌に投稿することがあります。学会によっては、研究会や全国大会で発表したものを2重投稿とはみなしません。これらの場合、たいていはスタイルが異なるので、CSSも異なり、さらに文書の構造を変える必要が出ることもあります…例えば、著者の所属の配置が異なったりしてCSSを変えるだけでは対処できないことがあります。

また、研究会や全国大会での議論を経て雑誌に掲載となったときに、Markdownではなく、所定のスタイルに従ったLaTeXや、所定のテンプレートを使ったMicrosoft Word形式で論文を提出すように求められることがあります。そもそも、研究会であれ全国大会であれ、所定のWordテンプレートやLaTeXスタイルを使うことが推奨されていることがほとんどでしょう。

こういった文書の形式や形式変換作業には気を使います。前に述べたクラス名やid属性の値もその1つです。また、HTMLやLaTeXといったフォーマットごとにエスケープが必要な文字が異なります。

構造にも気を使います。今回、著者を次のように書けるようにしました：

## 著者{.author}

著者1

著者2

著者3

この場合、個々の著者の特定の仕方が、この例のCSSのセレクターに現れています：

section:has(> .author) > p {
  display: inline;
}

「authorクラスのh2要素を直下に持つsection要素の直下の段落pの1つ1つが著者」です。著者や所属の書き方が学会によって異なったり、HTML（Markdown）からLaTeXに変換するプログラムの流用・メンテナンスを考えると、「⁠authorクラスの段落pの1つ1つが著者」となってる方が簡単そうです。

これらに関しては、別の機会に考えてみたいと思います。

s-selector-tag">a.eqref::before { content: "(" target-counter(attr(href url), equation) ")"; }