HTML5 - CSS - ol要素とli要素、type属性、list-style-type( @kamo_hiroyasu @anohana)Hiroyasu Kamo さん、Shiro Kawa さんのツイートより

JavaScriptリファレンス

開発環境

• macOS High Sierra - Apple(OS)
• Emacs (Text Editor)
• JavaScript (プログラミング言語)
• Safari(Web ブラウザー)

W3C勧告では上線で1000倍を表す表記を使う I̅V̅I. などを例示していますが、多くのブラウザは実装していないようですね。

— Hiroyasu Kamo (@kamo_hiroyasu) 2017年10月17日

Unicodeに100,000までのローマ数字があるのでそれを使う実装があっても良さそうですが… ↀ(1000), ↁ(5000), ↂ(10000), ↇ(50000),ↈ(100000) これで399,999までいけるはず。

— Shiro Kawai (@anohana) 2017年10月17日

ol element の type 属性ではなく、CSS の list-style-type で指定しても結果は同じか気になったのと、他の種類の場合はどうなるか気になったので、気軽に確認できるようにしてみた。

コード(Emacs)

HTML5

<div id="output0"></div>
<input id="n0" type="number" min="1" step="1" value="1000">
<select id="marker0">
</select>

<script src="sample.js"></script>    

JavaScript

let types =   ['disc',
               'circle',
               'square',
               'decimal',
               'cjk-decimal',
               'decimal-leading-zero',
               'lower-roman',
               'upper-roman',
               'lower-greek',
               'lower-alpha',
               'lower-latin',
               'upper-alpha',
               'upper-latin',
               'arabic-indic',
               'bengali',
               'cambodian',
               'cjk-earthly-branch',
               'cjk-heavenly-stem',
               'cjk-ideographic',
               'devanagari',
               'ethiopic-numeric',
               'georgian',
               'gujarati',
               'gurmukhi',
               'hebrew',
               'hiragana',
               'hiragana-iroha',
               'japanese-formal',
               'japanese-informal',
               'kannada',
               'katakana',
               'katakana-iroha',
               'khmer',
               'korean-hangul-formal ',
               'korean-hanja-formal',
               'korean-hanja-informal',
               'lao',
               'lower-armenian',
               'malayalam',
               'mongolian',
               'myanmar',
               'oriya',
               'persian',
               'persian',
               'simp-chinese-formal',
               'simp-chinese-informal',
               'tamil',
               'telugu',
               'thai',
               'tibetan',
               'trad-chinese-formal',
               'trad-chinese-informal',
               'upper-armenian',
               'disclosure-open',
               'disclosure-closed',
               'ethiopic-halehame-ti-er',
               'ethiopic-halehame-ti-et',
               'hangul',
               'hangul-consonant',
               'urdu'],
    div0 = document.querySelector('#output0'),
    input_n0 = document.querySelector('#n0'),
    input_marker0 = document.querySelector('#marker0'),
    inputs = [input_n0, input_marker0],
    range = (start, end, step=1) => {
        let res = [];
        for (let i = start; i < end; i += step) {
            res.push(i);
        }
        return res;
    };

marker0.innerHTML =
    types
    .map((type) => 
         `<option ${type === 'upper-roman' ? 'selected' : ''}>${type}</option>`)
    .join('');

let output = () => {
    let n = parseInt(input_n0.value, 10);

    div0.innerHTML =
        `<ol style="list-style-type: ${marker0.value}">` +
        range(0, n)
        .map((i) => `<li style="margin-left:12em;">${i + 1}</li>`).join('\n') +
        '</ol>';
};

inputs.forEach((input) => input.onchange = output);
output();