Missing asciidoc / asciidoctor CSS for specific markup features

[obilodeau]

For example, while asciidoctor supports the kbd:[F1] macro and we do the proper rendering in this back-end, since reveal.js doesn't have the CSS for that feature, the kbd macro does nothing on the visual output.

There are several things unsupported. Let's track them here:

• kbd macro (related Replaced <kbd> element with <span> for the keyboard sequence. #76, kbd macro doesn't work #276)
• tables (Table frame options and compact tables #56, Vertical table alignment not working with reveal.js backend #42, Tables do not listen to "grid" and "frames" options #29, Table not generated correctly when one column contain bullet list #23)
• quotes
• source code call-outs (Font icons for source code callouts #54)
• .unstyled role to create lists without bullets

[obilodeau]

@mojavelinux how do you achieve this with bespoke? I don't see any CSS in the back-end.

[mojavelinux]

@obilodeau I haven't covered all the CSS there yet either.

...but then again, if someone is using the kbd macro in a presentation, I really have to question why ;) I'd only find it acceptable for making a slideument. In which case, I might have a dedicated slideument theme.

[obilodeau]

This should now be really easy to fix. Just add relevant CSS there: https://github.com/asciidoctor/asciidoctor-reveal.js/blob/master/templates/asciidoctor_revealjs.css.slim

Pull Requests welcome!

[obilodeau]

Added a ref to #276 in the top description.

[obilodeau]

Tables and kbd macro are now supported. Updated tasks accordingly.

[slonopotamus]

I want to use [.step] feature with something that is not actually a list, but just a sequence of statements.

If I'm not mistaken, [.step] currently only works on lists. So, I need a way to suppress list bullets.

In Asciidoctor, list bullet suppression is done using .unstyled role with following CSS: ul.unstyled{list-style-type:none;margin-left:0}. asciidoctor-reveal.js needs something like that.

[obilodeau]

.unstyled

Thanks for reporting, I added it to the list at the top of this issue.

If I'm not mistaken, [.step] currently only works on lists. So, I need a way to suppress list bullets.

I don't think it should be the case since reveal.js supports fragments on different HTML items. Can you create a simple one-slide document demonstrating the issue and file a new issue with it please?

[slonopotamus]

I don't think it should be the case since reveal.js supports fragments on different HTML items. Can you create a simple one-slide document demonstrating the issue and file a new issue with it please?

Sure, reported as #347.

[archiloque]

I'd like to work on this issue but I need to know what visual result you'd want to achieve for the quotes.

For block quotes Asciidoctor displays only an opening quotation mark by default whereas reveal.js use nothing by default, and in its demo presentation they have an opening and a closing quotation mark (which is obtained by manually adding the quotation marks directly in the presentation content, it's not done with CSS):

So what should asciidoctor-reveal.js do?

[ggrossetie]

whereas reveal.js use nothing by default

I think that the default style provided by reveal.js is intentionally limited.

which is obtained by manually adding the quotation marks directly in the presentation content, it's not done with CSS

Yikes!

So what should asciidoctor-reveal.js do?

Not sure, I think the current output is decent.
Having said that, some font sizes are out of proportion but it might be a personal preference.

Still, I think it's important to provide a default style that looks great.
In my opinion, we should open a dedicated issue when we find an AsciiDoc/Asciidoctor feature that does not look great using the default style or when it has no visual hint.

[archiloque]

In my opinion, we should open a dedicated issue when we find an AsciiDoc/Asciidoctor feature that does not look great using the default style or when it has no visual hint.

So for this issue I should just deal with the .unstyled case ?

[ggrossetie]

So for this issue I should just deal with the .unstyled case ?

Yes 👍🏻