Anomalous HTML line break for inline equations within quotes or followed by punctuation

[pglpm]

Bug description

In HTML output, an inline formula within quotes, for example some text "$a=b$" some text or some text $a=b$, some text may at times get a line break right after the initial quote, or right before the final quote or comma or full-stop.

Steps to reproduce

1. Save this example document testquotes.qmd:

---
title: "Test quotes"
format:
  html:
    html-math-method: mathjax
---

test "$a=b$" test "$a=b$" test "$a=b$" test "$a=b$" test "$a=b$" test "$a=b$" test "$a=b$" test "$a=b$" test "$a=b$" test "$a=b$" test "$a=b$" test "$a=b$" test "$a=b$" test "$a=b$" test "$a=b$" test "$a=b$" test "$a=b$" test "$a=b$" test "$a=b$" test "$a=b$" test "$a=b$" test "$a=b$" test "$a=b$" test "$a=b$" test "$a=b$" test "$a=b$" test "$a=b$" test "$a=b$" test "$a=b$" test "$a=b$" test "$a=b$" test "$a=b$" test "$a=b$" test "$a=b$" test "$a=b$" test "$a=b$" test "$a=b$" test "$a=b$" test "$a=b$" test "$a=b$" test "$a=b$" test "$a=b$" test "$a=b$" test "$a=b$" test "$a=b$" 

test $a=b$, test $a=b$, test $a=b$, test $a=b$, test $a=b$, test $a=b$, test $a=b$, test $a=b$, test $a=b$, test $a=b$, test $a=b$, test $a=b$, test $a=b$, test $a=b$, test $a=b$, test $a=b$, test $a=b$, test $a=b$, test $a=b$, test $a=b$, test $a=b$, test $a=b$, test $a=b$, test $a=b$, test $a=b$, test $a=b$, test $a=b$, test $a=b$, test $a=b$, test $a=b$, test $a=b$, test $a=b$, test $a=b$, test $a=b$, test $a=b$, test $a=b$, test $a=b$, test $a=b$, test $a=b$, test $a=b$, test $a=b$, test $a=b$, test $a=b$, test $a=b$, test $a=b$,

2. Render the document to HTML:

quarto render testquotes.qmd --to html

3. Open the rendered HTML file testquotes.html in a browser. Browsers tested: Firefox 114.0.1 (64-bit), Chromium 114.0.5735.106 (Official Build) snap (64-bit) on Ubuntu 20.04.

4. Slowly resize the browser window, enlarging or shrinking it, paying attention at where the adapted line breaks appear. You should be able to see the situation as in this screenshot; see the purple squares:
   

Expected behavior

Line breaks shouldn't occurr after opening quotes, or before closing quotes or commas or full-stops.

Actual behavior

Line breaks sometimes occurr after opening quotes, or before closing quotes or commas or full-stops around an inline equation.

Your environment

• IDE: GNU Emacs 28.1 (build 1, x86_64-pc-linux-gnu, GTK+ Version 3.24.20, cairo version 1.16.0) of 2022-07-28
• OS: Ubuntu 20.04 64-bit, Kernel Version: 5.14.0-1059-oem

Quarto check output

[✓] Checking versions of quarto binary dependencies...
      Pandoc version 3.1.1: OK
      Dart Sass version 1.55.0: OK
[✓] Checking versions of quarto dependencies......OK
[✓] Checking Quarto installation......OK
      Version: 1.3.353
      Path: /opt/quarto/bin

[✓] Checking basic markdown render....OK

[✓] Checking Python 3 installation....OK
      Version: 3.8.10
      Path: /usr/bin/python3
      Jupyter: (None)

      Jupyter is not available in this Python installation.
      Install with python3 -m pip install jupyter

[✓] Checking R installation...........OK
      Version: 4.3.0
      Path: /usr/lib/R
      LibPaths:
        - /usr/local/lib/R/site-library
        - /usr/lib/R/site-library
        - /usr/lib/R/library
      knitr: 1.43
      rmarkdown: 2.22

[✓] Checking Knitr engine render......OK

[pglpm]

This may be a bug of MathJax rather than Quarto. But I wonder whether a workaround like the one mentioned here could be implemented.

[pglpm]

In case it may help others with the same problem, the other workaround mentioned here works:

To ensure that

test "$a=b$" test

doesn't get line breaks after the first quotation mark or before the last, add a span this way:

test ["$a=b$"]{style="display:inline-block;"} test

I don't know if this could be implemented in Quarto by default.

[pglpm]

This bug is still present in the latest version of quarto (1.3.433). I was wondering if there are any news about it, and if anyone confirms it. It is quite cumbersome to have to use the workaround described in this comment whenever there's punctuation following or preceding inline maths. Cheers!

[mcanouil]

@pglpm As you can see, the issue is still open and not attached to a PR at this point.

[mcanouil]

To note, this is not a bug, it's HTML.
You want browsers to read “<span class="math inline">\(a=b\)</span>” as one word which is definitely not, thus the need to use a span <span style="display:inline-block;">“<span class="math inline">\(a=b\)</span>”</span> (described by yourself).

I am almost certain there are no better way to do this, i.e., your "workaround" is not a workaround but the actual solution.
Overall, this question is 100 % HTML.

[pglpm]

@mcanouil Thank you for the explanation, I understand. I wonder if the following solution could be implemented in Quarto:

1. punctuation adjacent to an inline math block ($...$) should be put within the math-inline span when translating to HTML; for example <span class="math inline">“\(a=b\)”</span>;
2. a style="display:inline-block;" should be added to the span.

So for example "$a=b$" in a .qmd file would be rendered as

<span class="math inline" style="display:inline-block;">“\(a=b\)”</span>

From some experiments it seems to solve the problem.

But I know very little about how this works – maybe it's all pandoc doing this, outside of what Quarto can do – so it may not make sense. Apologies in that case!

[mcanouil]

Seems very unlikely, because why not add other marks, such as ending ? or !, etc.
Also, here you are using MathJax, but Quarto offers the ability to use various math libraries which do not behave the same way.

Here the output is done by Pandoc writer quarto pandoc index.qmd --from markdown --to html --mathjax and as I said in the end it comes down to HTML rules.

I really don't think something general can be done here and in my opinion, putting quotes around equation is a bit unorthodox if I may.

To note, you could write a Lua filter to do the surrounding span.

[pglpm]

I see, thank you for one more explanation. I'll check out the other math libraries. I had to use MathJax because other libraries don't offer some options such as Italic Greek uppercase letters and similar.

It isn't so much about quotation marks than about commas and full-stops. These are quite common after inline maths if you're giving a list of variables, for instance, or ending a sentence with a variable name. The problem appears in these cases too.

I'll think about Lua, but going to such lengths would make using Quarto pointless in my use case – I could go back to use LaTeX and produce a pdf with all the desired details and behaviour.

[mcanouil]

Here is a really simple example of a Lua filter which embed any Quoted element which contains inline math into a span.

See https://quarto.org/docs/extensions/filters.html for the filter documentation.

return {
  {Quoted = function (elem) 
    for _, inline in ipairs(elem.content) do
      if inline.t == "Math" then
        return pandoc.Span(elem, {style = "display:inline-block;" })
      end
    end
    return elem
  end}
}

[pglpm]

Cheers! I'll try to adapt it to general adjacent punctuation. Side comment: great short tutorial about Lua filters in the link you shared! Have never used Lua, only heard the name.

[mcanouil]

The issue for punctuation marks is that you need to check the next element to now what it is then embed N and N+1 element together (it's possible but less easy).
Quoted is a special element.

Quarto document	Native AST
--- format: native --- test "$a=b$" test $a=b$. "something else"	Pandoc Meta { unMeta = fromList [] } [ Para [ Str "test" , Space , Quoted DoubleQuote [ Math InlineMath "a=b" ] ] , Para [ Str "test" , Space , Math InlineMath "a=b" , Str "." ] , Para [ Quoted DoubleQuote [ Str "something" , Space , Str "else" ] ] ]