Lists shown in two columns

[wstomv]

I started teaching again this week, using RISE (on Mac). I have been using RISE for a number of years now. To my surprise, I suddenly saw that a list with bullet items is shown in two columns next to each other, for the narrower items only.

See attached two screen shots: on in wide window, other in narrow window; the exact same slide. N.B. This issue stretches the images to the same width, but one is a narrower window than the other!

What is happening here? Can I switch this off?

[wstomv]

One more piece of information:

• I used two empty lines between list items, to separate them further.

• When using a single empty line, the two-column effect disappears (but items appear closer together)

So, there is somewhat of a workaround. Still, I would like to understand what is happening here.

[damianavila]

Do you see the same if you are in notebook mode (I mean the difference between one and two empty lines)? When you see the two columns, if you zoom out (Ctrl -), do you still see the same pattern?

[wstomv]

In notebook mode (i.e. not RISE presentation mode), the difference is that with two empty lines there is more vertical spacing. But the items are still shown in a single column, no matter how wide the window is or how far you zoom in/out.

In presentation mode, zooming matters. The more you zoom out (fonts get smaller), the more columns will be created. Zooming in will reduce the number of columns.

Another note that may be relevant: I use a custom CSS that I have attached. Maybe I made a mistake there?

rise.css.zip

[parmentelat]

On 24 Apr 2020, at 18:53, Tom Verhoeff notifications@github.com wrote:

Another note that may be relevant: I use a custom CSS that I have attached. Maybe I made a mistake there?

one easy way for figure that out would be to run without that rise.css, did you try this out ?

[parmentelat]

On 23 Apr 2020, at 10:07, Tom Verhoeff notifications@github.com wrote:

One more piece of information:

• I used two empty lines between list items, to separate them further.

• When using a single empty line, the two-column effect disappears (but items appear closer together)

So, there is somewhat of a workaround. Still, I would like to understand what is happening here.

so this is markdown-related; with 2 newlines markdown would produce something like two

tags with one

in each and one
• in each
  the second version would ouput one

  with one

  and 2
  • s or something along those lines, this is of the top of my head and I haven’t double checked that

    so naturally the layout ends up different

    PS. my assumption is that in the first case, you had written e.g.

    * first line
    
    * second line

    while in the second it was simply

    * first line
    * second line

[parmentelat]

Another note that may be relevant: I use a custom CSS that I have attached. Maybe I made a mistake there?

at first sight there is nothing in there that could cause the matter

on second read it seems that you're using an old version of rise, apparently if I tell from the look of the navigation arrows that smell like an older reveal.js if you haven't not done so already, would you mind upgrading rise to the latest version ?

[wstomv]

CSS does not seem to be involved.

Here are the two kinds of input. Single empty line:

* Short item 1

* Short item 2

* Short item 3

* Short item 4

Two empty lines:

* Short item 1

* Short item 2

* Short item 3

* Short item 4

[wstomv]

I updated my installation to:

rise 5.6.1 jupyter_client 6.1.2 jupyter_core 4.6.3

But this makes no difference.

Two follow-up questions:

• My goal is to separate items further (especially when I only have a few on a slide).

  Is there (another) workaround for that? MarkDown doesn't seem to have support for that. Can I throw in some CSS applying to a single slide?

• Even if the HTML generated in the two cases is different (single ul-tag, versus multiple), I wonder why it would flow the separate ul-tags side by side? Didn't happen before.

[parmentelat]

sorry, I misunderstood completely
I was so much tuned to what I had in mind that I failed to see what you were saying all along

so I could reproduce the issue; here's how; I also added this example with the others in the repo as examples/newlines-in-bullets-issue546.ipynb on the maintenant branch

it's funny because I can see a difference already between no white line and 1 white line, even though the html look identical - I had only time for a quick look
I can confirm there is a different html layout - like I described above - with 2 white lines per item; I agree with you that the way things are laid out at the end is not what I'd expect

ps. the various flavours of markdown are endless and full of surprises until today I thought that one or two lines would not make a difference, so I am afraid I can't tell if that has ever worked differently

but IIRC you said this was not behaving like that before ? but at the same time you reported in another issue to be running a very old setup; so can you elaborate on all this ?
it'd help if we could pinpoint the moment where things have started to behave this way

[wstomv]

I am not sure I can confirm when this behavior started. I have been teaching with RISE for a number of years, on and off. Now, 'on' again. In a previous course, I have used these double empty lines to create more vertical spacing without problem. But looking back, it may be the case that the items were not short enough to cause any problems there.

As indicated, I upgraded, and that makes no difference (as you confirmed). I have tried switching off various injected CSS definitions, but none of them make a difference. On the other hand, on a regular web page, putting ul-tags, with one short li-tag inside, below each other will not render them side by side (nor does that happen when the notebook itself gets rendered). So, it must be a configuration injected somewhere, presumably with RISE or Reveal.js.

Open question:

• Does anyone have a good way of increasing the vertical spacing in a bullet list (on a slide)?

[parmentelat]

Open question: Does anyone have a good way of increasing the vertical spacing in a bullet list (on a slide)?

that one is easy, if you accept to change it in a uniform manner throughout the slideshow, you can easily customize your css, presumably through the line-height of those elements

[wstomv]

Increasing the li-item spacing in a specifc bullet list (not all of them) can be accomplished as follows:

• Include a code cell (Slide Type: Skip) containing

  %%HTML
  <style type="text/css">.wide li {margin-top: 20px;}</style>

  Alternatively: put the content of the style-tag in ~/.jupyter/custom/custom.js, to make it apply to all notebooks.

• In the markdown cell, write the bullet list as

  <div class="wide">
  
  * Item 1
  * Item 2
  * Item 3
  
  </div>

Notes:

• The empty line after the opening div-tag and before the closing div-tag are important. Without those empty lines, the markdown inside the div-tag won't get rendered.
• Of course, you can use a class name other than wide, or a margin other than 20px.

This is the least obtrusive way that I could cook up.