asciidoctor / asciidoctor-epub3

:blue_book: Asciidoctor EPUB3 is a set of Asciidoctor extensions for converting AsciiDoc to EPUB3
https://asciidoctor.org
MIT License
214 stars 68 forks source link

RFE: Provide a way to control the style of the brackets injected into `btn` macros #450

Closed someth2say closed 8 months ago

someth2say commented 9 months ago

Right now, in order to "style" buttons, we are adding brackets around them:

      def convert_inline_button node
        %(<b class="button">[<span class="label">#{node.text}</span>]</b>)
      end

IMHO, brackets are a style decision, and hence those should be injected by the default CSS. I was about to propose removing the brackets, and using CSS's ::before and ::after classes to inject the brackets, but @mojavelinux made a fair comment that CSS support in many ePub viewers is less than ideal.

Another approach, proposed by Dan, is applying a span directly to the brackets. IIUC, something like:

      def convert_inline_button node
        %(<b class="button"><span class="btn_before">[</span><span class="label">#{node.text}</span><span class="btn_before">]</span></b>)
      end

By using this structure, the stylesheet can control the looks btn_before and btn_after (or even make it hidden or change their content).

mojavelinux commented 9 months ago

the stylesheet can control the looks btn_before and btn_after

I think these classes are too fine-grained. I think the uniform class name "enclosure" (or "envelope") would be sufficient.

Otherwise, :+1:

mojavelinux commented 9 months ago

Hmm, now that I think about it, if the user wanted to use different opening and closing delimiters, then it might be convenient to have two classes (though it still could be achieved with CSS selectors using a single class).

I'm actually thinking that "before" and "after" are sufficient in that case. Underscores are problematic in HTML output because they could end up getting matched as formatting, so we want to avoid them.

<b class="button"><span class="before">[</span><span class="label">button text</span><span class="after">]</span></b>

Then CSS can use b.button > .before and b.button > .after to control these styles. I prefer this proposal over my previous one.