Create a role for a two column layout

[obilodeau]

One of the common patterns in a presentation is to split things in two and have bullets on one side and {code, image, graph} on the other side.

I would like to provide CSS tied to a role to achieve that easily.

• Must allow combining several block types: image with code, bullets with bullets, logos, bullets with code, etc.
• Could allow setting a specific background color (2 column layout slide with different width and background colors #234)
• Don't break background compatibility (that said we are not responsible of avoiding downstream CSS breakage)

See what others have done:

Asciidoctor PDF.js

CSS source

.two-col > .slide-content {
  display: flex;
  flex-direction: row;
}

.two-col > .slide-content > *:first-child {
  margin-right: 10px;
  flex: 50%;
}
.two-col > .slide-content > *:last-child {
  margin-left: 10px;
  flex: 50%;
}

A user presentation

Markup (source):

=== Local Variable Type Inference [jep]#https://openjdk.java.net/jeps/286[JEP 286]#

[.col2]
--
* New reserved Java type `var`
* _„real type“_ inferred by compiler *on first initialization*
* can denote classes (`Integer`) & primitives (`int`)
* *only*  available for _local variables_
--

[.source.col2,java]
----
var primitiveVal = 5;   // int
var doubleVal    = 5d;  // double

final var sl = new ArrayList<String>();

var letters = "";
for (var s : sl) {
    letters += s.toLowerCase();
}

// var: enable annotation w/ type infer
(var x, @NotNull var y) -> x + y;
----

CSS (source):

.col2 {
  width:48% !important;
  margin: 0 1% !important;
  float:left;
}
/* Aufzählung nicht zentrieren im 2col layout.*/
.reveal .col2 ol, .reveal .col2  dl, .reveal .col2  ul {
    display:table;
}

[ggrossetie]

Follow-up: #301 (comment)

I had the feeling that it was achievable without doing so.
Isn't it working for the other example I provided in the issue?

Sorry I misspoke, it's definitely possible to create a two columns layout without wrapping the content in a <div>.

I'm using a similar technique to create the following slide:

[.half.left.green]
== !

[.is-half.left.has-dark-background]
--
Some authors

[circle]
- Edgar Allen Poe
- Sheri S. Tepper
- Bill Bryson
--

[.is-half.right]
--
A normal paragraph.
Line breaks are not preserved.
// line comments, which are lines that start with //, are skipped

A blank line separates paragraphs.
--

However, the first example relies on a wrapping <div class="slide-content">:

.two-col > .slide-content {
  display: flex;
  flex-direction: row;
}

.two-col > .slide-content > *:first-child {
  margin-right: 10px;
  flex: 50%;
}
.two-col > .slide-content > *:last-child {
  margin-left: 10px;
  flex: 50%;
}

So it's somehow related as it would allow to use a grid or a flex display on the wrapping <div> to do more advanced layout.
And it would also be possible to easily center the content vertically:

In the above screenshot, it's still doable without a wrapping <div> because we only have one block but If we have a paragraph and a code block then it gets complicated 😱

[ggrossetie]

@obilodeau Are you working on it? I don't want to tread on your toes 😉

[obilodeau]

Nope, not working on it. Just trying out the various options.

I'll file comments with screenshots if I do anything worth mentioning.

My plan for tonight (not during $dayjob): fix #331, merge #327 and release 4.0.0.

[ggrossetie]

Ok I will give it a try then 👨‍💻