將有序列表中的希伯來字母對齊到右側

Question

我正在設計包含有序列表的文章。 我在對齊列表中的字母時遇到了問題，正如希伯來語所接受的（I.E.這是在Microsoft Office Word中格式化的順序列表）。 我試圖玩與CSS附加到片段。

ol { 
 
    list-style-type: hebrew; 
 
    direction: rtl; 
 
    text-align: right; 
 
}

<ol> 
 
    <li>1</li> 
 
    <li>2</li> 
 
    <li>3</li> 
 
    <li>4</li> 
 
    <li>5</li> 
 
    <li>6</li> 
 
    <li>7</li> 
 
    <li>8</li> 
 
    <li>9</li> 
 
    <li>10</li> 
 
    <li>11</li> 
 
    <li>12</li> 
 
    <li>13</li> 
 
</ol>

錯：

期望：

編輯：

我有以下「解決方案」。隨意提供更脆弱的東西。

ol { 
 
    list-style-type: hebrew; 
 
    direction: rtl; 
 
    text-align: right; 
 
} 
 

 
li { 
 
    counter-increment: num; 
 
    display: flex; 
 
} 
 

 
li:before { 
 
    content: '.' counter(num, hebrew); 
 
    direction: ltr; 
 
    unicode-bidi: bidi-override; 
 
    min-width: 23px; 
 
}

<ol> 
 
    <li>1</li> 
 
    <li>2</li> 
 
    <li>3</li> 
 
    <li>4</li> 
 
    <li>5</li> 
 
    <li>6</li> 
 
    <li>7</li> 
 
    <li>8</li> 
 
    <li>9</li> 
 
    <li>10</li> 
 
    <li>11</li> 
 
    <li>12</li> 
 
    <li>13</li> 
 
</ol>

EDIT2：

另一種方法是這樣的：

ol { 
 
    list-style-type: hebrew; 
 
    list-style-position: inside; 
 
    direction: rtl; 
 
    text-align: right; 
 
}

<ol> 
 
    <li>1</li> 
 
    <li>2</li> 
 
    <li>3</li> 
 
    <li>4</li> 
 
    <li>5</li> 
 
    <li>6</li> 
 
    <li>7</li> 
 
    <li>8</li> 
 
    <li>9</li> 
 
    <li>10</li> 
 
    <li>11</li> 
 
    <li>12</li> 
 
    <li>13</li> 
 
</ol>

不幸的是它看起來有點醜陋。 希望有一種方法可以將這種態度的直線性和前面的外觀結合起來。

Answer 1

我想你可以嘗試一種不同的方式。看看下面的代碼是否符合你的要求。

ol { 
 
    direction: rtl; 
 
    text-align: right; 
 
    counter-reset: num; 
 
    float: left; 
 
} 
 
li { 
 
    list-style-type: none; 
 
    counter-increment: num; 
 
    padding-bottom: 4px; 
 
    text-align: right; 
 
    position: relative; 
 
} 
 
li:before { 
 
    content: '.' counter(num, hebrew); 
 
    padding-left: 10px; 
 
    text-align: right; 
 
    position: absolute; 
 
    width: 28px; 
 
    right: -35px; 
 
    direction: ltr; 
 
}

<ol> 
 
    <li>1</li> 
 
    <li>2</li> 
 
    <li>3</li> 
 
    <li>4</li> 
 
    <li>5</li> 
 
    <li>6</li> 
 
    <li>7</li> 
 
    <li>8</li> 
 
    <li>9</li> 
 
    <li>10</li> 
 
    <li>11</li> 
 
    <li>12</li> 
 
    <li>13</li> 
 
</ol>