mirror of
https://github.com/boostorg/website-v2-docs.git
synced 2026-01-19 04:42:17 +00:00
82 lines
1.8 KiB
Plaintext
82 lines
1.8 KiB
Plaintext
= List Styles
|
|
:navtitle: Lists
|
|
|
|
== Ordered list numeration
|
|
|
|
The browser automatically numbers xref:antora:asciidoc:ordered-and-unordered-lists.adoc[ordered lists] and selects a numeration style by list depth in the following order: decimal, lower-alpha, lower-roman, upper-alpha, upper-roman.
|
|
|
|
AsciiDoc allows the author to override the numeration style for an ordered list.
|
|
Here's an example of that output:
|
|
|
|
[source,html]
|
|
----
|
|
<div class="olist loweralpha">
|
|
<ol class="loweralpha" type="a">
|
|
<li><p>a</p></li>
|
|
<li><p>b</p></li>
|
|
<li><p>c</p></li>
|
|
</ol>
|
|
</div>
|
|
----
|
|
|
|
In order to support this customization, you must assign the list-style-type property to the following classes on the `<ol>` element in your stylesheet.
|
|
|
|
|===
|
|
|<ol> class |list-style-type property value
|
|
|
|
|arabic
|
|
|decimal
|
|
|
|
|decimal
|
|
|decimal-leading-zero
|
|
|
|
|loweralpha
|
|
|lower-alpha
|
|
|
|
|lowergreek
|
|
|lower-greek
|
|
|
|
|lowerroman
|
|
|lower-roman
|
|
|
|
|upperalpha
|
|
|upper-alpha
|
|
|
|
|upperroman
|
|
|upper-roman
|
|
|===
|
|
|
|
== Checklist
|
|
|
|
A xref:antora:asciidoc:checklists.adoc[checklist] is an unordered list with items that are prefixed with a checkbox marker (checked or unchecked).
|
|
Here's an AsciiDoc source example that produces a checklist:
|
|
|
|
[source,asciidoc]
|
|
----
|
|
* [ ] todo
|
|
* [x] done!
|
|
----
|
|
|
|
If font-based icons are enabled (`icons=font`), the checkbox gets inserted as the first element of the paragraph element that contains the list item text.
|
|
|
|
[source,html]
|
|
----
|
|
<div class="ulist checklist">
|
|
<ul class="checklist">
|
|
<li>
|
|
<p><i class="fa fa-square-o"> todo</p>
|
|
</li>
|
|
<li>
|
|
<p><i class="fa fa-check-square-o"> done!</p>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
----
|
|
|
|
The recommended approach is to hide the list markers (`list-style: none`), then add a checkbox glyph on the icon element using either a background image or a `before` pseudo element.
|
|
|
|
Here's how it might appear:
|
|
|
|
* [ ] todo
|
|
* [*] done!
|