4

I'd like to layout (and maybe print) my AsciiDoctor document, which is a cheatsheet with mostly tables.

What is the best way to get a multi-column HTML output and also get multi-column PDF for printing?

I've found that

#col {-moz-column-count: 2;-webkit-column-count: 2;column-count: 2;}

can be used in the HTML with a <div>, but so far I modified the HTML manually. (I'm only guessing a bit what to do, since I'm not a web-developer.)

Is there a way to include this style and div in the AsciiDoctor source file?

What is the best way to get a multi-column PDF?

2
  • Hi Gerenuk, Did you ever solve this problem?
    – Liz
    Feb 28, 2017 at 7:27
  • Someone showed me that there was some hard-coded width in the result (cannot remember which line that was). Removing that produced a two column HTML, which was kind of ok. But, of course, in HTML the content goes down the full first column, which isn't what I wanted. For now I decided that maybe a searchable HTML with a table of contents isn't that bad after all.
    – Gere
    Feb 28, 2017 at 18:25

1 Answer 1

3

This describes how to do this for HTML.

You can add CSS as passthrough-content (++++) when using HTML output. Your example would look like this:

++++
<style>
#col {-moz-column-count: 2;-webkit-column-count: 2;column-count: 2;}
</style>
++++

You could then add a div around some content using passthrough content as well:

++++
<div id="col">
++++

This

Is 

Multicolumn 

text

++++
</div>
++++

But to assign an ID to a block you could write in a more portable way

[[col]]
--
This

Is 

Multicolumn 

text
--

As #col is a CSS selector for an ID of an element, it might be more convenient to use a CSS class .col instead. You can then have multiple blocks with the same style like this - note that this is now using single brackets for the block style instead of the double brackets above for the ID.

++++
<style>
.col {-moz-column-count: 2;-webkit-column-count: 2;column-count: 2;}
</style>
++++

[col]
--
This

Is 

Multicolumn 

text
--

[col]
--
This

Is 

Multicolumn 

text
--

The last snippet would produce the following:

Two Column layout

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.