How to make list markers stand upright in vertical text

In Chinese, Japanese, Korean, and Mongolian vertically-set text it is normal for list counters to sit upright above the start of the list.

Picture of vertical lists with numeric counters.

Until recently this was problematic, because browsers would only show the numbers lying on their side. This article describes how to make them stand upright as shown in the picture above.

Details

We'll look at two alternative approaches, one of which works across all major browser engines, and another which doesn't currently work with WebKit browsers.

Use counter-styles

Customised counter-styles are now supported by all major browser engines. This therefore provides an interoperable solution.

First, you need to create an @counter-style declaration in your CSS. We suggest two alternatives below, but as these are customisable you can also make up your own.

Option 1. Numbers followed by dots.

@counter-style dotted-decimal { 
system: fixed; 
symbols: '\2488' '\2489' '\248A' '\248B' '\248C' '\248D' '\248E' '\248F' '\2490' '\2491' '\2492' '\2493' '\2494' '\2495' '\2496' '\2497' '\2498' '\2499' '\249A' '\249B';
/* symbols: '⒈' '⒉' '⒊' '⒋' '⒌' '⒍' '⒎' '⒏' '⒐' '⒑' '⒒' '⒓' '⒔' '⒕' '⒖' '⒗' '⒘' '⒙' '⒚' '⒛'; */
suffix: ' ';
}

Option 2. Circled numbers.

@counter-style circled-decimal { 
system: fixed 0;
symbols: '\24EA' '\2460' '\2461' '\2462' '\2463' '\2464' '\2465' '\2466' '\2467' '\2468' '\2469' '\246A' '\246B' '\246C' '\246D' '\246E' '\246F' '\2470' '\2471' '\2472' '\2473' '\3251' '\3252' '\3253' '\3254' '\3255' '\3256' '\3257' '\3258' '\3259' '\325a' '\325b' '\325c' '\325d' '\325e' '\325f' '\32b1' '\32b2' '\32b3' '\32b4' '\32b5' '\32b6' '\32b7' '\32b8' '\32b9' '\32ba' '\32bb' '\32bc' '\32bd' '\32be' '\32bf';
/* symbols: '⓪' '①' '②' '③' '④' '⑤' '⑥' '⑦' '⑧' '⑨' '⑩' '⑪' '⑫' '⑬' '⑭' '⑮' '⑯' '⑰' '⑱' '⑲' '⑳' '㉑' '㉒' '㉓' '㉔' '㉕' '㉖' '㉗' '㉘' '㉙' '㉚' '㉛' '㉜' '㉝' '㉞' '㉟' '㊱' '㊲' '㊳' '㊴' '㊵' '㊶' '㊷' '㊸' '㊹' '㊺' '㊻' '㊼' '㊽' '㊾' '㊿'; */
suffix: ' '
}

These counter style definitions are taken from Ready-made Counter Styles, where you can find several alternative styles that may be of interest.

Note that these counter styles are of the 'fixed' type. This means that they only support lists containing up to 20 or 50 items, respectively. This is probably not problematic for most lists in vertical text.

Once you have added these definitions to your CSS, then tie them to your list using CSS code such as the following. You can, of course, add a class name to your element selector, if you want to apply the style to just certain lists.

li { list-style-type: dotted-decimal; }

Output in your browser:

  1. 仕込む前に生芋を１／４ぐらいの大きさにカット。
  2. すり潰した生芋
  3. ながらのパケット式の定量練り、通称バタ練り機

Styling the counter using ::marker

An alternative approach would be to use ordinary markup, but style the counter so that it is upright. This would enable you to have lists longer than those described above, but the positioning of the counters relative to the list item text is currently not so accurate.

For this approach we use the following CSS.

li::marker {
  text-combine-upright: all;
  }

Here's the result in your browser. As mentioned before, it mostly works in Blink and Gecko browsers, though the horizontal position is not quite right in Blink. But it doesn't work in Safari, so it's not a fully interoperable solution (at least not yet).

Output in your browser:

  1. 仕込む前に生芋を１／４ぐらいの大きさにカット。
  2. すり潰した生芋
  3. ながらのパケット式の定量練り、通称バタ練り機

Using more CSS to tweak the presentation

Both types of list described above can benefit from additional styling. For example, using the following CSS we can make the markers in the example just above slightly bigger, and coloured, and we can create a slightly larger gap between the counter and the list text.

li::marker {
  text-combine-upright: all;
  color: red;
  font-size: 1.2em;
  }
li {
  padding-inline-start: .4em;
  }

Output in your browser:

  1. 仕込む前に生芋を１／４ぐらいの大きさにカット。
  2. すり潰した生芋
  3. ながらのパケット式の定量練り、通称バタ練り機

The CSS ::marker pseudo-element allows you to apply the following adjustments:

  1. all font properties
  2. the white-space property
  3. color
  4. text-combine-upright, unicode-bidi, and direction
  5. the content property
  6. all animation and transition properties