Asciidoctor-pdf: List Items inside of a table with inline code overlap

[chuck-confluent]

I have a couple of spots in my document where I have a two column table with list items inside. When inline code wraps to the next line, I get some strange overlapping.

I thought this might be a misconfiguration in my theme, but I looked at a previous version where this overlap didn't occur and the theme for outline_list is the same.

I hope it's some misconfiuration, but I fear it's a bug in a newer version of asciidoctor-pdf. The older document was made using 1.5.0.beta.2, whereas the newer document is using 1.5.3

[mojavelinux]

It looks like it is specific to your theme or font, likely due to new line height logic that was added to address other bugs. It may have something to do with https://github.com/asciidoctor/asciidoctor-pdf/issues/1419#issuecomment-561028473

Can you provide a reproducible example so that I can study it?

[chuck-confluent]

Ok I just re-ran with the same exact theme 1.5.0.beta.2 and the issue did not occur

[mojavelinux]

Can you test using the default theme in Asciidoctor PDF?

[chuck-confluent]

Here's some asciidoc that should be illustrative:

== breaking stuff

[cols="a,a",grid=none,frame=none]
|===
|First column

* A bullet point with some `code` and more `really long code to go to next line` and maybe `more code`

| Another column

* Stuff
|===

[chuck-confluent]

Damn, actually I just ran with the default theme and the issue did not occur. This is a misconfiguration on my part, but I'm not sure where. Here is my slide theme:

# First page of document
title_page:
  background-color: #173361
  logo:
    image: image:confluent_logo-white.png[pdfwidth=80%]
    top: 40%
    align: center
  align: left
  title:
    top: 6%
    font:
      size: 36
      family: MarkOT
      style: bold
      color: #FFFFFF
  subtitle:
    margin_top: 10
    font_size: 18
    font_color: #FFFFFF
    line_height: 1.1
  authors:
    margin_top: 70  
    font:
      size: 12
      family: MarkOT
      style: bold
      color: #FFFFFF
  revision:
    font_color: #FFFFFF
    style: light

# With title, footers, margins, shoot for 1335x645 res images 
page:
  size: [21.42cm, 38.1cm]
  layout: landscape
  margin: [0.35in,0.35in,0.35in,0.35in]

base:
  align: left
  font_size: 24
  font_color: #000000
  font_family: MarkOT
  line_height_length: 16
  line_height: $base_line_height_length / $base_font_size

vertical_spacing: $base-line-height-length
vertical_rhythm: $base_line_height_length

prose:
  margin_top: 0
  margin_bottom: $vertical_spacing

link:
  font_color: #0074A2
  text-decoration: underline

verse:
  text_indent: 50

# callout numbers in code, like <<1>>
conum:
  line_height: 1.15

sidebar:
  background_color: #eeeeee
  padding: [12, 12, 0, 12]
  title_align: left
  font_style: normal
  font_size: 16
  border-radius: 10

# The different title sizes (=, ==, ===, etc.)
heading:
  h1:
    font_color: #1B3461
    font_size: 48
    font_style: bold
  h2:
    font_color: #1B3461
    font_size: 30
    font_style: bold
  h3:
    font_color: #1B3461
    font_size: 28
    font_style: normal
  h4:
    font_color: #1B3461
    font_style: light
    font_size: 24
  h5:
    font_color: #1B3461
    font_size: 14
    font_style: bold
  h6:
    font_color: #1B3461
    font_size: 9
    font_style: bold
  h7:
    font_color: #646464
    font_size: 9
    font_style: normal

# Example block (====)
example:
  border_color: #829494
  background_color: #B4E1E4
  border_width: 1
  padding: [12, 12, 0, 12]
  font_style: normal
  font_size: 12

# NOTE, TIP, IMPORTANT, CAUTION, WARNING
admonition:
  icon:
    tip:
      stroke-color: #FFC40C
    warning:
      stroke-color: #F26135
    important:
      stroke-color: #D8365D
    caution:
      stroke-color: #D8365D
    note:
      stroke-color: #00AFBA
  column_rule_color: #E6F5FB
  border_color: #E6F5FB
  border_width: 0.5
  padding: [9, 9, 9, 9]

# Code blocks
code:
  background_color: #FAFAFA
  border_color: #F2F2F2
  font_family: SourceCodePro
  font_size: 16
  line_height: 1.5
  padding: 9
  border_width: 0.5

# Inline code
literal:
  background_color: #f9f2f4
  border_color: #F2F2F2
  font_color: #c7254e
  font_family: SourceCodePro
  font_size: 18

thematic_break:
  border_color: #bebebe
  border_style: solid
  border_width: 0.5
  margin_top: 25
  margin_bottom: 40

# ulist:
#   marker:
#     font_family: NotoSansFallback
#     font_size: 24
#     line_height: 1.5
#     font_color: #0074A2
#     disc:
#       content: "\u2022"
#       font_color: #0074A2

description_list:
  term_font_style: bold
  term_spacing: 4
  description_indent: 25

outline_list:
  indent: 20
  item_spacing: 8
  marker_font_color: #0074A2

abstract:
  font_color: #4597CB
  font_size: 9
  font_style: Bold
  title:
    align: left
    font_color: #4597CB
    font_size: 12
    font_style: bold

table:
  background_color: #ffffff
  border_color: #bebebe
  border_width: 0.5
  caption_side: top
  font_size: 20
  grid_color: #F2F2F2
  head:
    font_size: 24
    font_style: bold
    background_color: #B4E1E4
    font_color: #173361
  foot:
    background_color: #4597CB
    font_color: #ffffff
  body:
    background_color: #FFFFFF
    stripe_background_color: #E6F5FB
  cell:
    padding: 4
toc:
  dot_leader:
    font_color: #bebebe
  line-height: 1.5
  h2:
    font_color: #003B49
    font_size: 12
    font_style: bold
  h3:
    font_color: #4597CB
    font_size: 9
    font_style: bold
  h4:
    font_color: #4b4b4b
    font_size: 9
    font_style: normal

footer:
  height: 0.5in
  font_color: #829494
  font_size: 12
  line_height: 1
  recto:
    left:
      content: '© 2014-2020 Confluent, Inc. '
    right:
      content: |
        {chapter-title} +
        {page-number}
    center:
      content: 'Not to be reproduced in any form without prior written consent.'
  verso:
    left: 
      content: $footer_recto_left_content
    center: 
      content: $footer_recto_center_content
    right: 
      content: $footer_recto_right_content

image:
  align: center
caption:
  align: left
  font_size: $base_font_size * 0.95
  font_style: italic

font:
  catalog:
    Noto Serif:
      normal: GEM_FONTS_DIR/notoserif-regular-subset.ttf
      bold: GEM_FONTS_DIR/notoserif-bold-subset.ttf
      italic: GEM_FONTS_DIR/notoserif-italic-subset.ttf
      bold_italic: GEM_FONTS_DIR/notoserif-bold_italic-subset.ttf
    MarkOT:
      normal: MarkOT-Light.ttf
      italic: MarkOT-Italic.ttf
      bold: MarkOT-Bold.ttf
      bold_italic: MarkOT-BoldItalic.ttf
      light: MarkOT-Light.ttf
      medium: MarkOT-Medium.ttf
    SourceCodePro:
      normal: SourceCodePro-Regular.ttf
      italic: SourceCodePro-It.ttf
      bold: SourceCodePro-Bold.ttf
      bold_italic: SourceCodePro-BoldIt.ttf
      Medium: SourceCodePro-Medium.ttf
      Medium_italic: SourceCodePro-MediumIt.ttf
    NotoSansFallback:
      normal: NotoSans-Regular.ttf
      italic: NotoSans-Italic.ttf
      bold: NotoSans-Bold.ttf
      bold_italic: NotoSans-BoldItalic.ttf
  fallbacks:
    - NotoSansFallback

[mojavelinux]

I'll give it a try. It's very likely a font issue (only related to the theme because the theme specifies the font). Asciidoctor PDF relies on the font to provide the required glyphs or else certain features don't work as expected. In many cases, this is a requirement inherited from Prawn (because it reads metrics from certain glyphs).

[chuck-confluent]

If it helps, the issue persists with both JB Mono and Source Code Pro font packages

[mojavelinux]

This happens when the only text on the line has a different font size (e.g., monospaced). In that case, Prawn collapses the line height. If there's at least one character on that line that isn't the smaller font, then it doesn't happen.

This isn't a regression since the behavior has been like this since at least the release candidates of 1.5.0. It's a behavior we're inheriting from Prawn. We have dealt with some edge cases in #1204, but this is a case not covered by that logic.

We know the line height we want and Prawn is not honoring that line height. The only way around this is to patch the logic in Prawn (once again) to see if we can get it to use the same height for all lines in a paragraph (or list item, or table cell).

[mojavelinux]

You can fix it by adding {zwsp} after the problematic phrase.

A bullet point with some `code` and more `really long code to go to next line` and maybe `more code`{zwsp}

(That's basically what we're doing internally at the start of the line)

[mojavelinux]

This is necessary whenever a line ends with monospaced text and that text is split across lines.

[mojavelinux]

To cite your original example, you'd write:

* set `heartbeat.interval.ms` to 1/3 `session.timeout.ms`{zwsp}

I honestly don't know how we can fix this natively as the logic is buried so deep inside of Prawn I can't even figure out where I would patch it.

[chuck-confluent]

Could this be fixed by setting the inline code font size to the same as the regular font size, even though they are different fonts? I will investigate further when I can get back on this project. Thank you for the workaround!

[chuck-confluent]

I should also add for the record that there are some instances where monospaced text at the end of the line actually line breaks in the middle of the word and doesn't do this overlapping. I'm totally fine with this behavior, but it's interesting to note that this issue doesn't occur every time the monospaced text causes a line break.

With that, I'll leave this. I am satisfied with the workaround. Thanks again Dan!

[mojavelinux]

Could this be fixed by setting the inline code font size to the same as the regular font size, even though they are different fonts?

It's not quite that simple. On that line, the line height is being computed from the monospaced font, which would mean the font size, ascender, and descender heights would all have to be the same as the prose font (which really isn't possible to configure). By adding the {zwsp}, you are forcing Prawn to read all that information from the prose font (actually, it takes the maximum).

[mojavelinux]

it's interesting to note that this issue doesn't occur every time the monospaced text causes a line break.

That's correct. It's only when the monospaced text is broken and there's no other text after it in that same paragraph or list item. In other words, it has to be the only text on the last line.

[mojavelinux]

Btw, it just so happens that adding a hard line break at the end also works (but doesn't affect appearance).

* prose text `monospaced text` +

Though I find the {zwsp} to be more clear.

[mojavelinux]

I have really good news for you! I figured out how to solve this problem without having to put hacks in your content. It turns out the solution we had to normalize the line height only applied to the first line. By moving the logic down to the line finalizer, we can apply it to every line.