→順序付きリスト
>Fet-Fe |
>Fet-Fe |
||
774行目: | 774行目: | ||
<li style="position: relative;"><span style="position: absolute; right: 100%; margin-right: 0.55em; user-select: none; -webkit-user-select: none;">𑱣𑱢.</span>𑰃𑰟𑰳𑰝𑰻𑱃𑰓𑱃𑰭𑰢𑰿𑰝𑰦𑰿𑰧𑰨𑰿𑰞𑰸𑱁</li> | <li style="position: relative;"><span style="position: absolute; right: 100%; margin-right: 0.55em; user-select: none; -webkit-user-select: none;">𑱣𑱢.</span>𑰃𑰟𑰳𑰝𑰻𑱃𑰓𑱃𑰭𑰢𑰿𑰝𑰦𑰿𑰧𑰨𑰿𑰞𑰸𑱁</li> | ||
<li style="position: relative;"><span style="position: absolute; right: 100%; margin-right: 0.55em; user-select: none; -webkit-user-select: none;">𑱤.</span>𑰟𑰯𑰠𑰯𑱃𑰐𑰿𑰪𑰟𑰯𑰢𑰿𑱁</li> | <li style="position: relative;"><span style="position: absolute; right: 100%; margin-right: 0.55em; user-select: none; -webkit-user-select: none;">𑱤.</span>𑰟𑰯𑰠𑰯𑱃𑰐𑰿𑰪𑰟𑰯𑰢𑰿𑱁</li> | ||
</ol> | |||
</div> | |||
モンゴル文字の場合にも、<code>list-style-type: mongolian;</code>を指定すれば番号を変更できる。 | |||
横書きの中に埋め込んだ[[#縦書き|縦書き]]リストの場合には、番号が上の行と重なってしまう可能性があるため、十分な数の改行を入れてスペースを取る必要がある。 | |||
<div lang="sa-Mong" style="writing-mode: vertical-lr; text-orientation: sideways;"> | |||
ᠠ᠋ ᢔᢌᠠ᠋ᠠ ᢑᠾᢈᠠᠠ ᠶᢈᢈ | |||
ᠠ᠋ ᠲᠠ᠋ ᢒᠷᠠ ᠲᠠ᠋ ᠮᢅᠣᠸᠠ ᢑᠾᢈᠠᠠ ᠶᠠ᠋ᢁ᠂ ᢒᠷᠠ ᠲᠠ᠋ ᠮᠠ᠋ᢁ ᢒᠠ᠋ᠠ ᢑᠠ᠋ᢁ᠃ | |||
<ol style="list-style-type: mongolian; column-count: 2;"> | |||
<li>ᠪᠷᢈ ᢑᢑᠾᢈ ᠷᠠ᠋ᠠ ᢑᠧᠧᢋ᠃</li> | |||
<li>ᠠ᠋ ᢑᠧᢊ ᠺᠦ ᢏᠠ᠋ᢁ᠃</li> | |||
<li>ᢈ ᢉᠣᠸᠠ ᠺᠦ ᢏᠠ᠋ ᠪᠷᢈ ᢑᢑᠾᢈᢈ᠃</li> | |||
<li>ᠨᠠ᠋ ᢑᠾᠠ᠋ᠠ ᢐᠦ ᠯᠣᠸᠠ ᢒᠠ᠋ ᠠ᠋ᠠ ᠷᢑᠾᠠ᠋ ᢑᠾᠠ᠋ᠠ ᢐᠦ ᢉᠧ᠃</li> | |||
<li>ᢉᢊᢈ ᢐᢈ ᢋᠠ᠋᠃</li> | |||
<li>ᢑᢈᢈ ᢑᠾᢈᢈ ᠸᠧ ᠸᢈᢈ ᢌᠠᢗᠮ᠃</li> | |||
<li>ᡙᠠ᠋ ᠯᢅᠣᠸᠠ ᠨᠠ᠋ ᠨᢐᠠ᠋ ᠷᠠ᠋ᠠᢁ ᢀ᠋ᠰᠠ᠋ ᠶᠣᠸᠠ ᠺᠠ᠋ᢁ᠃</li> | |||
<li>ᠮᠦ ᠻᠠ᠋ ᠨᠠ᠋ᠠ ᠰᢈ ᢉᠠ᠋ᠠ ᠸᠠ᠋ ᢋᠠ᠋ ᠨᢅᠣᠸᠠ ᠨᠦ ᠨᠠ᠋ᠠ ᠰᢈ ᢉᠠ᠋ᢁ᠃</li> | |||
<li>ᢐᠦ ᠯᢈᠠᠠ ᠰᢈᠠ ᢒᠷᠠ ᠶᠠ᠋ ᢀ᠋ᢐᠨᠠ᠋ ᠰᠠ᠋ ᠸᠠ᠋ ᠷᢏᠠᠮ᠃</li> | |||
<li>ᠨᠠ᠋ᠠ ᢖᢖᠾᠠ᠋ ᠯᠣᠸᠸᠠ᠃</li> | |||
<li>ᢈᢈ ᢑᠤᠦ ᢑᠧ ᢑᢑᠸᢈ ᠸᠠ᠋ ᢋᠠ᠋ ᢀ᠋ᠨᠠ᠋ ᢒᠷᠠ ᠺᠷᢈ ᡙᢈᠠᠮ᠃</li> | |||
<li>ᠠ᠋ ᢑᠠ᠋ ᠰᠣᠸᠠ ᠮᠠᢗᢐ᠃</li> | |||
<li>ᠱᠧ᠃</li> | |||
<li>ᠨᢈ ᢒᠠ᠋ᠠ ᢐᠠ᠋ ᠧ ᢉᠠ᠋ᠠ ᢖᠠ᠋ ᠨᠠᢗᢊ᠃</li> | |||
<li>ᠣᠸᠠᢐ᠃</li> | |||
<li>ᠰᠠ᠋ ᠮᠪᠦ ᢑᢑᠾᠣᠸᠸᠠ ᠱᠠ᠋ᠠ ᢉᠠ᠋ ᠯᢈᠠ ᠰᢈᠧ ᢐᠠ᠋ᠠ ᠸᠠ᠋ ᠨᠠ᠋ᠠ ᠷᢔᠧ᠃</li> | |||
<li>ᠦ ᡛᠠ᠋ᢁ᠃</li> | |||
<li>ᢀᠤᠦ᠃</li> | |||
<li>ᢈᢈ ᢑᠤᠦ ᢐᠣᠸᠸᠠ ᢋᠠ᠋ ᠰᠠ᠋ ᢒᢐᠠ᠋ ᠮᢈᠠ ᠷᠲᠧ᠃</li> | |||
<li>ᢑᠠ᠋ᠠ ᢑᠾᠠ᠋ᠠ ᠺᠾᢦ ᢑᠠᢗᢒ᠃</li> | |||
</ol> | |||
</div> | |||
但し、2024年8月11日現在の時点で多くのブラウザで数字の向きが正しくない状態で表示されてしまう。 | |||
これを修正するには、本来のHTML+CSSなら<code>::marker</code>擬似要素<ref>[https://developer.mozilla.org/ja/docs/Web/CSS/::marker ::marker] - MDN Web Docs</ref>を利用するが、MediaWikiではCommon.cssを編集しないと利用できない。 | |||
そのため、それ以外の方法でうまく調整する必要がある。 | |||
下の例では、各項目を<code><li style="position: relative;"><span style="writing-mode: horizontal-tb; position: absolute; left: 0.5em; bottom: 100%; margin-bottom: 0.55em; user-select: none; -webkit-user-select: none;">᠑</span><span style="position: absolute; bottom: 100%; margin-bottom: 0.55em; user-select: none; -webkit-user-select: none;">᠂</span>ᠪᡵᡳ ᡩᢡᡳ ᡵᠠᢇ ᡩᡝᡳᢜ᠉</li></code>として表示を変更している。 | |||
バイクシュキー文字で<code>right</code>方向にかけていた調節と同様のものを<code>bottom</code>方向にかけているが、数字だけ横書きにするために<code>writing-mode: horizontal-tb;</code>を設定している。その上、数字の位置を調整するため、1桁ならば<code>left: 0.5em;</code>、2桁ならば<code>left: 0.25em;</code>を指定している。 | |||
<div lang="sa-Mong" style="writing-mode: vertical-lr; text-orientation: sideways;"> | |||
ᠠ ᢢᢞᠠᢇ ᢟᠶᠠᢇ ᠶᡳᡳ | |||
ᠠ ᡨᠠ ᢒᡵᠠ ᡨᠠ ᠮᢅᠣ ᢟᠶᠠᢇ ᠶᠠᢁ᠈ ᢒᡵᠠ ᡨᠠ ᠮᠠᢁ ᢒᠠᢇ ᡩᠠᢁ᠉ | |||
<ol style="list-style-type: none; column-count: 2;"> | |||
<li style="position: relative;"><span style="writing-mode: horizontal-tb; position: absolute; left: 0.5em; bottom: 100%; margin-bottom: 0.55em; user-select: none; -webkit-user-select: none;">᠑</span><span style="position: absolute; bottom: 100%; margin-bottom: 0.55em; user-select: none; -webkit-user-select: none;">᠂</span>ᠪᡵᡳ ᡩᢡᡳ ᡵᠠᢇ ᡩᡝᡳᢜ᠉</li> | |||
<li style="position: relative;"><span style="writing-mode: horizontal-tb; position: absolute; left: 0.5em; bottom: 100%; margin-bottom: 0.55em; user-select: none; -webkit-user-select: none;">᠒</span><span style="position: absolute; bottom: 100%; margin-bottom: 0.55em; user-select: none; -webkit-user-select: none;">᠂</span>ᠠ ᡩᡝᠩ ᡤᡠ ᢏᠠᢁ᠉</li> | |||
<li style="position: relative;"><span style="writing-mode: horizontal-tb; position: absolute; left: 0.5em; bottom: 100%; margin-bottom: 0.55em; user-select: none; -webkit-user-select: none;">᠓</span><span style="position: absolute; bottom: 100%; margin-bottom: 0.55em; user-select: none; -webkit-user-select: none;">᠂</span>ᡳ ᡬᠣ ᡤᡠ ᢏᠠ ᠪᡵᡳ ᡩᢡᡳᡳ᠉</li> | |||
<li style="position: relative;"><span style="writing-mode: horizontal-tb; position: absolute; left: 0.5em; bottom: 100%; margin-bottom: 0.55em; user-select: none; -webkit-user-select: none;">᠔</span><span style="position: absolute; bottom: 100%; margin-bottom: 0.55em; user-select: none; -webkit-user-select: none;">᠂</span>ᠨᠠ ᢡᠠᢇ ᢠᡠ ᠯᠣ ᢒᠠ ᠠᢇ ᡵᢡᠠ ᢡᠠᢇ ᢠᡠ ᡬᡝ᠉</li> | |||
<li style="position: relative;"><span style="writing-mode: horizontal-tb; position: absolute; left: 0.5em; bottom: 100%; margin-bottom: 0.55em; user-select: none; -webkit-user-select: none;">᠔</span><span style="position: absolute; bottom: 100%; margin-bottom: 0.55em; user-select: none; -webkit-user-select: none;">᠂</span>ᡬᢛᡳ ᢠᡳ ᢜᠠ᠉</li> | |||
<li style="position: relative;"><span style="writing-mode: horizontal-tb; position: absolute; left: 0.5em; bottom: 100%; margin-bottom: 0.55em; user-select: none; -webkit-user-select: none;">᠖</span><span style="position: absolute; bottom: 100%; margin-bottom: 0.55em; user-select: none; -webkit-user-select: none;">᠂</span>ᡩᡳᡳ ᢡᡳᡳ ᠸᡝ ᠸᡳᡳ ᢞᠠ᠊ᠠ᠋ᠮ᠉</li> | |||
<li style="position: relative;"><span style="writing-mode: horizontal-tb; position: absolute; left: 0.5em; bottom: 100%; margin-bottom: 0.55em; user-select: none; -webkit-user-select: none;">᠗</span><span style="position: absolute; bottom: 100%; margin-bottom: 0.55em; user-select: none; -webkit-user-select: none;">᠂</span>ᡥᠠ ᠯᢅᠣ ᠨᠠ ᠨᢠᠠ ᡵᠠᢇᢁ ᢀ᠋ᠰᠠ ᠶᠣ ᡤᠠᢁ᠉</li> | |||
<li style="position: relative;"><span style="writing-mode: horizontal-tb; position: absolute; left: 0.5em; bottom: 100%; margin-bottom: 0.55em; user-select: none; -webkit-user-select: none;">᠘</span><span style="position: absolute; bottom: 100%; margin-bottom: 0.55em; user-select: none; -webkit-user-select: none;">᠂</span>ᠮᡠ ᠺᠠ ᠨᠠᢇ ᠰᡳ ᡬᠠᢇ ᠸᠠ ᢜᠠ ᠨᢅᠣ ᠨᡠ ᠨᠠᢇ ᠰᡳ ᡬᠠᢁ᠉</li> | |||
<li style="position: relative;"><span style="writing-mode: horizontal-tb; position: absolute; left: 0.5em; bottom: 100%; margin-bottom: 0.55em; user-select: none; -webkit-user-select: none;">᠙</span><span style="position: absolute; bottom: 100%; margin-bottom: 0.55em; user-select: none; -webkit-user-select: none;">᠂</span>ᢠᡠ ᠯᠶᠠᢇ ᠰᠶᠠ ᢒᡵᠠ ᠶᠠ ᢀ᠋ᢠᠨᠠ ᠰᠠ ᠸᠠ ᡵᢏᠠᠮ᠉</li> | |||
<li style="position: relative;"><span style="writing-mode: horizontal-tb; position: absolute; left: 0.25em; bottom: 100%; margin-bottom: 0.55em; user-select: none; -webkit-user-select: none;">᠑᠐</span><span style="position: absolute; bottom: 100%; margin-bottom: 0.55em; user-select: none; -webkit-user-select: none;">᠂</span>ᠨᠠᢇ ᡯᢝᠠ ᠯᠣᠣ᠉</li> | |||
<li style="position: relative;"><span style="writing-mode: horizontal-tb; position: absolute; left: 0.25em; bottom: 100%; margin-bottom: 0.55em; user-select: none; -webkit-user-select: none;">᠑᠑</span><span style="position: absolute; bottom: 100%; margin-bottom: 0.55em; user-select: none; -webkit-user-select: none;">᠂</span>ᡳᡳ ᡩᡠᠣ ᡩᡝ ᡩᡩᠸᡳ ᠸᠠ ᢜᠠ ᢀ᠋ᠨᠠ ᢒᡵᠠ ᡤᡵᡳ ᡥᠶᠠᠮ᠉</li> | |||
<li style="position: relative;"><span style="writing-mode: horizontal-tb; position: absolute; left: 0.25em; bottom: 100%; margin-bottom: 0.55em; user-select: none; -webkit-user-select: none;">᠑᠒</span><span style="position: absolute; bottom: 100%; margin-bottom: 0.55em; user-select: none; -webkit-user-select: none;">᠂</span>ᠠ ᡩᠠ ᠰᠣ ᠮᠠ᠊ᠠ᠋ᢠ᠉</li> | |||
<li style="position: relative;"><span style="writing-mode: horizontal-tb; position: absolute; left: 0.25em; bottom: 100%; margin-bottom: 0.55em; user-select: none; -webkit-user-select: none;">᠑᠓</span><span style="position: absolute; bottom: 100%; margin-bottom: 0.55em; user-select: none; -webkit-user-select: none;">᠂</span>ᡧᡝ᠉</li> | |||
<li style="position: relative;"><span style="writing-mode: horizontal-tb; position: absolute; left: 0.25em; bottom: 100%; margin-bottom: 0.55em; user-select: none; -webkit-user-select: none;">᠑᠔</span><span style="position: absolute; bottom: 100%; margin-bottom: 0.55em; user-select: none; -webkit-user-select: none;">᠂</span>ᠨᡳ ᢒᠠᢇ ᢠᠠ ᡝ ᡬᠠᢇ ᡯᠠ ᠨᠠ᠊ᠠ᠋ᠩ᠉</li> | |||
<li style="position: relative;"><span style="writing-mode: horizontal-tb; position: absolute; left: 0.25em; bottom: 100%; margin-bottom: 0.55em; user-select: none; -webkit-user-select: none;">᠑᠕</span><span style="position: absolute; bottom: 100%; margin-bottom: 0.55em; user-select: none; -webkit-user-select: none;">᠂</span>ᠣᢠ᠉</li> | |||
<li style="position: relative;"><span style="writing-mode: horizontal-tb; position: absolute; left: 0.25em; bottom: 100%; margin-bottom: 0.55em; user-select: none; -webkit-user-select: none;">᠑᠖</span><span style="position: absolute; bottom: 100%; margin-bottom: 0.55em; user-select: none; -webkit-user-select: none;">᠂</span>ᠰᠠ ᠮᠪᡠ ᡩᢡᠣᠣ ᡧᠠᢇ ᡬᠠ ᠯᠶᠠ ᠰᠶᡝ ᢠᠠᢇ ᠸᠠ ᠨᠠᢇ ᡵᢢᡝ᠉</li> | |||
<li style="position: relative;"><span style="writing-mode: horizontal-tb; position: absolute; left: 0.25em; bottom: 100%; margin-bottom: 0.55em; user-select: none; -webkit-user-select: none;">᠑᠗</span><span style="position: absolute; bottom: 100%; margin-bottom: 0.55em; user-select: none; -webkit-user-select: none;">᠂</span>ᡠ ᠨᡳᠶᠠᢁ᠉</li> | |||
<li style="position: relative;"><span style="writing-mode: horizontal-tb; position: absolute; left: 0.25em; bottom: 100%; margin-bottom: 0.55em; user-select: none; -webkit-user-select: none;">᠑᠘</span><span style="position: absolute; bottom: 100%; margin-bottom: 0.55em; user-select: none; -webkit-user-select: none;">᠂</span>ᢀᡠᠣ᠉</li> | |||
<li style="position: relative;"><span style="writing-mode: horizontal-tb; position: absolute; left: 0.25em; bottom: 100%; margin-bottom: 0.55em; user-select: none; -webkit-user-select: none;">᠑᠙</span><span style="position: absolute; bottom: 100%; margin-bottom: 0.55em; user-select: none; -webkit-user-select: none;">᠂</span>ᡳᡳ ᡩᡠᠣ ᢠᠣᠣ ᢜᠠ ᠰᠠ ᢒᢠᠠ ᠮᠶᠠ ᡵᡨᡝ᠉</li> | |||
<li style="position: relative;"><span style="writing-mode: horizontal-tb; position: absolute; left: 0.25em; bottom: 100%; margin-bottom: 0.55em; user-select: none; -webkit-user-select: none;">᠒᠐</span><span style="position: absolute; bottom: 100%; margin-bottom: 0.55em; user-select: none; -webkit-user-select: none;">᠂</span>ᡩᠠᢇ ᢡᠠᢇ ᢚᠣᠸᠠ ᡩᠠ᠊ᠠ᠋ᢒ᠉</li> | |||
</ol> | </ol> | ||
</div> | </div> |