こんにちは。Vivliostyle という CSS を使った組版ソフトウェアがあり、現在勉強中です。執筆する上で @vivliostyle/theme-base の仕様を理解しておく必要があるようなので、手始めにその一番基本となる basic.css の内容をメモします。
theme を使いこなすには、まずどのような変数が定義されているかを知る必要があります。用途に合わせた変数名の逆引き辞典のようなものがあればよいのですが、現状見当たらないので、自分で逆引きメモを作ってみようというのが狙いです*1。
:root にある大量の変数定義はすっ飛ばして、その後の実際の css (？) の部分だけ整理します。「こういう編集したいから css はこう変えたい」→「なら theme のこの変数を上書きするのがよい」といった調べ方をする想定です。
- リンク
- 典型パターン
- タグごとの変数
- 全称系 (*, *::before, *::after)
- html タグ
- body タグ
- code, kbd, pre, samp タグ
- h1, h2, h3, h4, h5, h6 タグ
- b, strong タグ
- del タグ
- em タグ
- :is(b, strong) em
- big タグ
- small タグ
- sub タグ
- sup タグ
- rt タグ
- hr タグ
- a タグ
- a:hover
- img タグ
- p タグ
- blockquote タグ
- figure タグ
- figure > :not(:is(picture, figcaption)), figure > picture > img
- figure img
- figure table
- figcaption タグ
- ul, ol, dl タグ
- :is(ul, ol) :is(ul, ol), dl dl
- ul, ol タグ
- ul:not(:is(ul *, ol *))
- ol:not(:is(ul *, ol *))
- dd タグ
- dt, dd タグ
- pre タグ
- table タグ
- *:has(> table)
- table, tr, th, td タグ
- th, td タグ
- th タグ
- td タグ
- その他
典型パターン
数が膨大とはいえ、ある程度規則的に命名されている。
基本形
例. p タグ
p { hanging-punctuation: var(--vs--p-hanging-punctuation); hyphens: var(--vs--p-hyphens); letter-spacing: var(--vs--p-letter-spacing); line-height: var(--vs--p-line-height); margin-block: var(--vs--p-margin-block); margin-inline: var(--vs--p-margin-inline); text-align: var(--vs--p-text-align); text-indent: var(--vs--p-text-indent); text-spacing: var(--vs--p-text-spacing); word-break: var(--vs--p-word-break); word-spacing: var(--vs--p-word-spacing); }
抽象化すると以下のように表現できる。
tagName { key: var(--vs--${tagName}-${key}); ... }
この形式を基本形と呼ぶこととする。
一部のタグ群については、個々のタグ名ではなく、共通のタグ名で代表することがある。
例.
code, kbd, pre, samp { font-family: var(--vs--monospace-font-family); ... }
この場合には「共通のタグ名は monospace」などと断りを入れた上で基本形とみなすこととする。
デフォルト付き基本形
いくつかのタグをまとめて処理する場合、個別タグでの設定の変数と、全体のデフォルト値を設定していることがある。
例.
h1 { break-after: var(--vs--h1-break-after, var(--vs--heading-break-after)); ... }
抽象化すると以下のように表現できる。
tagName { key: var(--vs--${tagName}-${key}, var(--vs--${defaultName}-${key})); ... }
この形式をデフォルト付き基本形と呼ぶこととする。h1 タグの場合はデフォルト名は heading である。
基本形と同様、一部のタグ群については、個々のタグ名ではなく、共通のタグ名で代表することがある。
例.
b, strong { font-family: var(--vs--bold-font-family, var(--vs--heading-font-family)); ... }
この場合は「共通のタグ名は bold」などと断りを入れた上でデフォルト値付き基本形とみなすこととする。
タグごとの変数
全称系 (*, *::before, *::after)
*, *::before, *::after { border-color: var(--vs-border-color); }
html タグ
基本形のキー
- font-size
「--vs--${key}」形式のキー
- font-family
- font-feature-settings
- font-kerning
- font-stretch
- font-style
- font-synthesis
- font-variant
- font-variation-settings
- font-weight
- letter-spacing
- line-height
- tab-size
- hyphens
- line-break
- overflow-wrap
- word-break
- columns
- column-fill
- column-gap
- text-orientation
- text-underline-offset
- text-underline-position
- orphans
- widows
- writing-mode
- text-spacing
- hanging-punctuation
- text-align
- word-spacing
その他
html { background-color: var(--vs-color-bg); color: var(--vs-color-body); }
body タグ
各種カウンタのリセットのみ
body { /* TODO: Remove prettier-ignore after Prettier v3 https://github.com/prettier/prettier/issues/13202 */ /* prettier-ignore */ counter-reset: var(--vs-crossref--root-counter-reset,) var(--vs-footnote--root-counter-reset,) var(--vs-document-root-counter-reset,); }
code, kbd, pre, samp タグ
基本形のキー (共通のタグ名は monospace)
- font-family
- font-feature-settings
- font-kerning
- font-size
- font-stretch
- font-variant
- font-variation-settings
- font-weight
- hyphens
- letter-spacing
- line-height
- text-spacing
- word-break
- word-spacing
h1, h2, h3, h4, h5, h6 タグ
デフォルト付き基本形のキー (デフォルト名は heading)
- break-after
- break-inside
- font-family
- font-feature-settings
- font-kerning
- font-size
- font-stretch
- font-variant
- font-variation-settings
- font-weight
- hyphens
- letter-spacing
- line-height
- margin-block
- text-align
- text-indent
- text-spacing
- word-break
- word-spacing
b, strong タグ
基本形のキー (共通のタグ名は bold)
- font-size
- font-weight
- vertical-align
デフォルト付き基本形のキー (共通のタグ名は bold; デフォルト名は heading)
- font-family
- font-feature-settings
- font-kerning
- font-stretch
- font-variant
- font-variation-settings
del タグ
基本形のキー
- text-decoration
em タグ
タグ名は em の代わりに emphasis を用いる。
基本形のキー
- font-family
- font-feature-settings
- font-kerning
- font-size
- font-style
- font-stretch
- font-variant
- font-variation-settings
- font-weight
- vertical-align
:is(b, strong) em
デフォルト付き基本形のキー (共通のタグ名は bold-emphasis; デフォルト名は emphasis)
- font-family
- font-feature-settings
- font-kerning
- font-size
- font-stretch
- font-variant
- font-variation-settings
- font-weight
その他
:is(b, strong) em { vertical-align: var(--vs--bold-emphasis-vertical-align, unset); }
big タグ
基本形のキー
- font-size
- vertical-align
small タグ
基本形のキー
- font-size
- vertical-align
sub タグ
基本形のキー
- font-size
- inset-block-end
sup タグ
基本形のキー
- font-size
- inset-block-start
rt タグ
基本形のキー
- font-size
hr タグ
基本形のキー
- margin-block
- margin-inline
その他
hr { border-color: var(--vs--hr-border-color, var(--vs-border-color)); border-width: 0; border-block-start-width: var(--vs--hr-border-width); }
a タグ
タグ名は a の代わりに anchor を用いる。
基本形のキー
- color
- text-decoration
a:hover
a:hover { text-decoration: var(--vs--anchor-text-decoration-on-hover); }
img タグ
基本形のキー
- image-resolution
p タグ
基本形のキー
- hanging-punctuation
- hyphens
- letter-spacing
- line-height
- margin-block
- margin-inline
- text-align
- text-indent
- text-spacing
- word-break
- word-spacing
blockquote タグ
基本形のキー
- font-size
- margin-block
- margin-inline
- writing-mode
figure タグ
基本形のキー
- align-items
- break-inside
- display
- flex-direction
- margin-block
- margin-inline
- writing-mode
figure > :not(:is(picture, figcaption)), figure > picture > img
固有変数利用は「--vs--figure-item-padding-inline」のみ
figure > :not(:is(picture, figcaption)), figure > picture > img { max-inline-size: 100%; padding-inline: var(--vs--figure-item-padding-inline); }
figure img
値の設定
figure img { object-fit: contain; }
figure table
値の設定
figure table { margin: 0; }
figcaption タグ
基本形のキー
- break-inside
- font-size
- margin-block
- margin-inline
- text-align
- text-indent
ul, ol, dl タグ
基本形のキー (共通のタグ名は lists)
- margin-block
- margin-inline
:is(ul, ol) :is(ul, ol), dl dl
値の設定
:is(ul, ol) :is(ul, ol), dl dl { margin-block: 0; margin-inline: 0; }
ul, ol タグ
基本形のキー
- list-style-type
- padding-inline-start
デフォルト付き基本形のキー (デフォルト名は lists)
- text-align
- text-indent
ul:not(:is(ul *, ol *))
ul:not(:is(ul *, ol *)) { padding-inline-start: max( var(--vs--ul-padding-inline-start), var(--vs--ul-minimum-inline-indent-size) ); }
ol:not(:is(ul *, ol *))
ol:not(:is(ul *, ol *)) { padding-inline-start: max( var(--vs--ol-padding-inline-start), var(--vs--ol-minimum-inline-indent-size) ); }
dd タグ
基本形のキー
- margin-inline-start
dt, dd タグ
基本形のタグ (共通のタグ名は dt-dd)
- display
デフォルト付き基本形のキー (デフォルト名は lists)
- text-align
- text-indent
pre タグ
基本形のキー
- margin-block
- margin-inline
- font-size
- overflow-x
- padding-block
- padding-inline
- text-align
- word-break
- writing-mode
その他
基本形のうしろに「-on-screen」または「-on-print」を付ける。
@media screen { pre { white-space: var(--vs--pre-white-space-on-screen); } } @media print { pre { white-space: var(--vs--pre-white-space-on-print); } }
table タグ
基本形のキー
- break-inside
- font-size
- margin-block
- margin-inline
- writing-mode
デフォルトが2つあるパターン
以下の形式を取る:
table { border-〇-△-width: var( --vs--table-border-width-〇-△, var( --vs--table-border-width-outer, var(--vs--table-border-width) ) ); }
下記の全組み合わせの4通りが設定されている。
- 〇は「block」および「inline」
- △は「start」および「end」
その他
table { max-block-size: 100%; max-inline-size: 100%; }
*:has(> table)
タグ名を table とした基本形のうしろに「-on-screen」または「-on-print」を付ける。
@media screen { *:has(> table) { overflow-x: var(--vs--table-container-overflow-x-on-screen); } } @media print { *:has(> table) { overflow-x: var(--vs--table-container-overflow-x-on-print); } }
table, tr, th, td タグ
デフォルト付き基本形のキー
table, tr, th, td { border-color: var(--vs--table-border-color, var(--vs-border-color)); }
th, td タグ
基本形のキー (共通のタグ名は table-cell)
- padding-block
- padding-inline
- font-weight
th タグ
デフォルト付き基本形 (デフォルト名は bold)
- font-size
デフォルト値が2個あるパターン
以下の形式を取る。
th { key: var( --vs--th-${key}, var( --vs--bold-${key}, var(--vs--heading-${key}) ) ); }
- font-family
- font-feature-settings
- font-kerning
- font-stretch
- font-variant
- font-variation-settings
その他
th { text-align: var( --vs--th-text-align, var(--vs--table-text-align, center) ); }
td タグ
デフォルト付き基本形のキー (デフォルト名は table)
- text-align
その他
変数利用は「--vs--table-border-width-cell」と「--vs--table-border-width」のみ。
tr:not(:last-child) { border-block-end-width: var( --vs--table-border-width-row, var(--vs--table-border-width-cell, var(--vs--table-border-width)) ); } thead > tr:last-child { border-block-end-width: var( --vs--table-border-width-thead-inner, var(--vs--table-border-width-cell, var(--vs--table-border-width)) ); } tfoot > tr:first-child { border-block-start-width: var( --vs--table-border-width-tfoot-inner, var(--vs--table-border-width-cell, var(--vs--table-border-width)) ); } th:not(:last-child), td:not(:last-child) { border-inline-end-width: var( --vs--table-border-width-column, var(--vs--table-border-width-cell, var(--vs--table-border-width)) ); } :is(tr, th, td, tbody, thead, tfoot, col, colgroup)[align='left'] { text-align: left; } :is(tr, th, td, tbody, thead, tfoot, col, colgroup)[align='right'] { text-align: right; } :is(tr, th, td, tbody, thead, tfoot, col, colgroup)[align='center'] { text-align: center; } :is(tr, th, td, tbody, thead, tfoot, col, colgroup)[align='justify'] { text-align: justify; text-align-last: justify; }
