Simple two column document

[mbrannstrom]

Hi,

I tried to create a simple two-column document with multiple pages, but I cannot make it work (using 1.0.0-alpha.3). The text does not flow as I want, see attached files.

Input:

• lorem-ipsum.adoc
• twocolumn.css

Output (which does not look that nice):

• lorem-ipsum.pdf

Is two-column mode possible? If so, how?

It would be nice with a two column document example or pre-made styles/templates (#43) with multiple levels of sections and long paragraphs. The cheat-sheet example is close, but not simple to generalize.

Regards,
Mikael Brännström

[ggrossetie]

Hi @mbrannstrom

Something like this sample.pdf?

Here's the CSS:

@page {
  size: A4; /* ; was missing */
  margin: 15mm 10mm 15mm 10mm;
}

div#content.content {
  /* removed margin */
  padding: 0;
  height: calc(100vh - 50mm);
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

.sect1, #preamble {
  column-count: 2; /* 2 columns */
  margin-right: 0.6cm;
  margin-left: 0.6cm;
  text-align-last: start; /* workaround a bug in Paged.js */
}

/* Some rules to make it look better */
h2 {
  margin-top: 0;
  break-before: always;
}

.sect1+.sect1 {
  border-top: none;
}

.sect2 {
  break-inside: avoid;
}

[ggrossetie]

Please keep in mind that the default stylesheet will be replaced by the custom stylesheet in the next version.

If you want to keep using the default stylesheet and override only a few rules, you will need to update the stylesheet attribute:

:stylesheet: asciidoctor-pdf/css/asciidoctor.css;asciidoctor-pdf/css/document.css;asciidoctor-pdf/css/features/title-document-numbering.css;twocolumn.css

Alternatively, you can copy-paste the content of asciidoctor.css, document.css and title-document-numbering.css to create your own stylesheet.

[mbrannstrom]

Yes, now it looks much better. Thanks!

Still some odd behavior, like the last page which has wrapped into two columns when it should fit into the first one.

[ggrossetie]

Yes, now it looks much better. Thanks!

👍

Still some odd behavior, like the last page which has wrapped into two columns when it should fit into the first one.

Yes, I'm not sure what's the best way to solve this behavior.... as far as I know, column-count will distribute the content evenly (same height). You can probably avoid column break on paragraph:

.paragraph {
  break-inside: avoid-column;
}

[ggrossetie]

It would be nice with a two column document example or pre-made styles/templates (#43) with multiple levels of sections and long paragraphs. The cheat-sheet example is close, but not simple to generalize.

Feel free to add an example in examples/document 😉

[jonathanhanna]

Still some odd behavior, like the last page which has wrapped into two columns when it should fit into the first one.

Yes, I'm not sure what's the best way to solve this behavior.... as far as I know, column-count will distribute the content evenly (same height).

The normal way to fix this issue is to use column-fill: auto. However, using this alone doesn't work with Chrome. According to the MDN docs, you need to also add a height property. So far, this is working for me!

I'm still a bit confused regarding the best value to use for height. You'll run into problems if the value is too large or too small. The following worked for me (using 8.5 x 11in page layout with 0.5 in margins):

#content {
    column-count: 2;
    column-gap: 0.25in;
    column-fill: auto;
    height: 10in;
}

My apologies for using imperial units 😄.