"

14 Custom List Styles

1. Two-column List

Used in Elementary Arabic I

Custom Styles

.column-list {

column-count: 2;

}

.column-list li:not(last-child) {

margin-bottom: 1em;

}

In-Text

<ol class=”column-list”>
<li>**LIST CONTENT**</li>
</ol>

Example

  1. Lorem
  2. Lorem
  3. Lorem
  4. Lorem
  5. Lorem
  6. Lorem

2. Custom Numbered Lists (With Non-Arabic Numbers/Non-English Alphabet)

Used in Intermediate Persian

Custom Styles

/* list markers in persian alphabet */
@counter-style persian {

symbols: الف ب پ ت ث جیم چ ح خ دال ذال ر ز ژ سین شین صاد ضاد طا ظا عین غین ف قاف کاف گاف لام میم نون واو ه ی;

}
.persian {

list-style: persian;

}

/* list markers in persian numbers up to 15 */
@counter-style persian-numbers {

symbols: ۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ ۱۲ ۱۳ ۱۴ ۱۵;

}
.persian-numbers {

list-style: persian-numbers;

}

In-Text

<ol lang=”fa” class=”persian-numbers” dir=”rtl”>
<li>LIST ITEM</li></ol>

Example

Persian Numerals

  1. lorem
  2. lorem
  3. lorem
  4. lorem

Persian Alphabet

  1. lorem
  2. lorem
  3. lorem
  4. lorem

3. Horizontal List

Used in Basic Tibetan

Custom Styles

.horiz-list {

counter-reset: counter;

}

.horiz-list li {

display:inline-block;
margin-right: 20px;

}

.horiz-list li:before {

content: counter(counter) ” “. “;
counter-increment: counter;

}

In-Text

<ol class=”horiz-list”>
<li>LIST ITEM</li>
</ol>

Example

  1. lorem
  2. lorem
  3. lorem
  4. lorem

License

Icon for the Creative Commons Attribution-NonCommercial 4.0 International License

MSUL's OER Program Internal Processes Copyright © by Chandlee Taylor; Joshua Newman; Julie Taylor; Mary Van Newkirk; and Linda Miles is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License, except where otherwise noted.

Share This Book