Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add missing list styles #451

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Conversation

archiloque
Copy link
Contributor

Intended to fix #77 , I have two questions

  1. I've added the list styles I found in asciidoctor's CSS and not only .unstyled. I'm not sure of the status of three case not found in asciidoctor's documentation :
  • ol.unnumbered
  • ol.unstyled / ol.none
  • ol.no-bullet

=> Should I keep them for compatibility ? Should they be in asciidoctor's documentation (or maybe they are here because people expect them but you don't want to encourage people to use them) ?

  1. I've checked the checklist case and the default case is not really good:

Capture d’écran 2021-08-17 à 21 25 32

The code at templates/ulist.html.slim mention /could use &#9745 (checked ballot) and &#9744 (ballot) w/o font instead and I think it would be a good day, what do you think ?

File used for testing :

= Test

== square

[square]
* one
* two
* three

== circle

[circle]
* one
* two
* three

== disk

[disk]
* one
* two
* three

== none

[none]
* one
* two
* three

== no-bullet

[no-bullet]
* one
* two
* three

== unstyled

[unstyled]
* one
* two
* three

== arabic

[arabic]
. one
. two
. three

== decimal

[decimal]
. one
. two
. three

== loweralpha

[loweralpha]
. one
. two
. three

== upperalpha

[upperalpha]
. one
. two
. three

== lowerroman

[lowerroman]
. one
. two
. three

== upperroman

[upperroman]
. one
. two
. three

== lowergreek

[lowergreek]
. one
. two
. three

== no-bullet

[no-bullet]
. one
. two
. three

== unnumbered

[unnumbered]
. one
. two
. three

== unstyled

[unstyled]
. one
. two
. three

== checklist

* [*] checked
* [x] also checked
* [ ] not checked
* normal list item

@archiloque archiloque marked this pull request as ready for review September 3, 2021 07:17
@ggrossetie
Copy link
Member

I've added the list styles I found in asciidoctor's CSS and not only .unstyled. I'm not sure of the status of three case not found in asciidoctor's documentation :

Good question, for unordered list the documentation says:

The unordered list marker can be set using any of the following block styles:

  • square
  • circle
  • disc
  • none or no-bullet (indented, but no bullet)
  • unstyled (no indentation or bullet) (HTML only)

https://docs.asciidoctor.org/asciidoc/latest/lists/unordered/#markers

For ordered lists:

For ordered lists, AsciiDoc supports the numeration styles such as lowergreek and decimal-leading-zero. The full list of numeration styles that can be applied to an ordered list are as follows:

Block style CSS list-style-type
arabic decimal
decimal [1] decimal-leading-zero
loweralpha lower-alpha
upperalpha upper-alpha
lowerroman lower-roman
upperroman upper-roman
lowergreek [1] lower-greek

https://docs.asciidoctor.org/asciidoc/latest/lists/ordered/#styles

To summarize:

  • no-bullet is an alias for none (and since none is shorter, I think we should promote none instead of `no-bullet but both are supported).
  • unstyled can be found in the documentation.
  • unnumbered can be useful if you want to remove the numbering (on ordered lists) but you want to keep the indentation.

So I guess we should support all styles.

I've checked the checklist case and the default case is not really good:

Indeed, I think the main issue is that the checkbox does not scale with the font size. Since we are using a large font size (for legibility) it does not look great.

Please note that the built-in HTML 5 converter will use checkbox only when the interactive option is defined. Otherwise it will use unicode and or Font Awesome icons check-square-o and fa-square-o if :icons: font is defined.

Using interactive checkbox can be useful in a presentation so we should keep this option but by default we should use unicode.
I'm fine with and instead of and .

Also it seems that it's possible to change the size of a checkbox using CSS : https://stackoverflow.com/a/24688640/3600979
So we might want to use this solution to make it look better when [%interactive] is set.

Hope it helps and thanks for looking into it 👍🏻

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Missing asciidoc / asciidoctor CSS for specific markup features
2 participants