行高があると中黒の位置が壊れるのを直す

おおよその方針としては行の最初の要素からバレットを生やすことでもっともらしい位置に中黒を表示する、というもの

環境によっては重すぎて閲覧すらもままならなくなるので使用は推奨しない

簡易版

既知の問題

基準にしている要素が画面幅に収まりきらず改行している場合、中黒の位置がずれる

更に深い要素を対象にすれば解消するが、それではあまりに重くなりすぎる

code:rough.css

.line .indent-mark .dot {

display: none;

}

.text:not(.formula-preview) {

.indent:has(> :is(br, .code, .formula, .image, .modal-image, .quote)),

.indent > :is(.char-index:first-child, .blank, .link:not(.icon), .page-link:first-child, .strong),

.indent-mark:not(:empty) + .indent > .code-start,

.indent > .deco > :not(.empty-char-index),

{

position: relative;

&::before {

position: absolute; top: 0; bottom: 0; left: -15px;

width: 6px;

height: 6px;

margin: auto;

content: "";

border-radius: 50%;

}

}

}

無駄に重いバージョン

こちらがなにか優れているということは恐らくない

code:robust.css

.line .indent-mark .dot { display: none; }

.stream .indent:not(:has( *)), /* Stream: 単独: テキスト */

.stream .indent:has( > br, > .formula, > a > img), /* Stream: 単独: 空行, 数式, 画像 */

.stream .indent:not(:has(> br, > .formula, > a > img)) > :first-child:not(:has(*)), /* Stream: 単独: その他 */

.text:not(.formula-preview) .indent:has( > :is(br, .formula, .modal-image)), /* 単一: 空行, 数式, 画像 */

.indent-mark:not(:empty) + .indent > .code-start, /* コードブロック */

.indent > :is(.char-index:first-child:not(.empty-char-index), .blank, .code, .icon, .link, .page-link, .quote, .strong), /* 単一: テキスト, その他 */

{

position: relative;

&::before {

position: absolute; top: 0; bottom: 0; left: -15px;

width: 6px;

height: 6px;

margin: auto;

content: "";

border-radius: 50%;

}

}