[i18n-drafts] [questions/qa-upright-counters-in-vertical] Round border of ::marker for circled decimal (#627)

yamahige has just created a new issue for https://github.com/w3c/i18n-drafts:

== [questions/qa-upright-counters-in-vertical]  Round border of ::marker for circled decimal ==
[source] (https://w3c.github.io/i18n-drafts/questions/qa-upright-counters-in-vertical.html) [en]

How about using round border of `::marker` to represent circled decimal in large ordered list?
This implementation requires `border`, `border-radius`, `background-clip`property for `::marker` pseudo element.

The circle is not a part of the text:
- but, generated texts do not match for page search, and could not copy generated text
- not accessible

<img width="555" alt="list_circled_decimal" src="https://github.com/user-attachments/assets/57a9693e-9b6a-44de-a9b3-808028bfd0ab">

CSS
```css
:root {
    writing-mode: vertical-rl;
    text-spacing-trim: trim-start;
    --color-grey: black;
}
ol.my {
    list-style: none;
    counter-reset: my-counter 0;
    li {
        counter-increment: my-counter;
    }
    li::before {
        content: counter(my-counter);
        text-combine-upright: all;
        border: thin solid var(--color-grey);
        border-radius: 50%;
        display: inline-block;
        padding-block: 0;
        padding-inline: 1px;
        margin-block: 1px;
        margin-inline-end: .5em;
    }
}
ol.my.grey li::before {
    color: white;
    background-color: var(--color-grey);
    background-clip: border-box;
}
```

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

<ol class="my grey">
    <li>ああああ</li>
    <li>「ああああああああああああああああああああ。」</li>
    <li>（ああ）ああ</li>
    <li style="counter-set: my-counter 9;">ああああああああああああああああああああああああ</li>
    <li>ああああああああああああああああああああああああ</li>
    <li style="counter-set: my-counter 98;">ああああああああああああああああああああああああ</li>
    <li>ああああああああああああああああああああああああ</li>
    <li>ああああああああああああああああああああああああ</li>
    <li>ああああああああああああああああああああああああ</li>
</ol>
```


Please view or discuss this issue at https://github.com/w3c/i18n-drafts/issues/627 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Sunday, 8 December 2024 03:42:01 UTC