[questions/qa-upright-counters-in-vertical] Large number of items and CJK punctuation characters

[yamahige]

[source] (https://w3c.github.io/i18n-drafts/questions/qa-upright-counters-in-vertical.html) [en]

How about including these features to inspire more comments.

• items with larger digits
• including CJK punctuation characters to clarify spacing control, as @taroyamamoto-451 commented in "4."
  • at the start of the prefix and the end of the suffix of "::marker"
  • at the start and the end of the item's body

For example:

CSS

:root {
    writing-mode: vertical-rl;
    text-spacing-trim: trim-start;
}

HTML

<ol>
    <li>仕込む前に生芋を１／４ぐらいの大きさにカット。</li>
    <li>すり潰した生芋</li>
    <li>ながらのパケット式の定量練り、通称バタ練り機</li>
    <li>…</li>
    <li value="9">「仕込む前に生芋を１／４ぐらいの大きさにカット。」</li>
    <li>（すり潰した生芋）</li>
    <li>ながらのパケット式の定量練り、<br>「通称バタ練り機」<br>ああああ</li>
    <li>…</li>
    <li value="99">仕込む前に生芋を１／４ぐらいの大きさにカット。</li>
    <li>すり潰した生芋</li>
    <li>ながらのパケット式の定量練り、<br>（通称バタ練り機）<br>ああああ</li>
</ol>

Or:

CSS

:root {
    writing-mode: vertical-rl;
    text-spacing-trim: trim-start;
}
ol.my {
    counter-reset: my-counter 0;
    padding-inline-start: 2em;
    & li {
        list-style: none;
        counter-increment: my-counter;
        .marker {
            margin-inline-start: -2em;
        }
        .marker::before {
            content: "（";
        }
        .marker::after {
            content: "）";
        }
        .marker .body::before {
            content: counter(my-counter);
            text-combine-upright: all;
        }
    }
}

HTML

<ol class="my">
    <li><span class="marker"><span class="body"></span></span>仕込む前に生芋を１／４ぐらいの大きさにカット。</li>
    <li><span class="marker"><span class="body"></span></span>すり潰した生芋</li>
    <li><span class="marker"><span class="body"></span></span>ながらのパケット式の定量練り、通称バタ練り機</li>
    <li><span class="marker"><span class="body"></span></span>…</li>
    <li style="counter-set: my-counter 9;"><span class="marker"><span class="body"></span></span>「仕込む前に生芋を１／４ぐらいの大きさにカット。」</li>
    <li><span class="marker"><span class="body"></span></span>（すり潰した生芋）</li>
    <li><span class="marker"><span class="body"></span></span>ながらのパケット式の定量練り、<br>「通称バタ練り機」<br>ああああ</li>
    <li><span class="marker"><span class="body"></span></span>…</li>
    <li style="counter-set: my-counter 99;"><span class="marker"><span class="body"></span></span>仕込む前に生芋を１／４ぐらいの大きさにカット。</li>
    <li><span class="marker"><span class="body"></span></span>すり潰した生芋</li>
    <li><span class="marker"><span class="body"></span></span>ながらのパケット式の定量練り、<br>（通称バタ練り機）<br>ああああ</li>
</ol>