Difficulties vertically aligning inline latexmath

[davidplowman]

Hi, I was advised in the asciidoctor-mathematical issues list to post this report here.

I have made a very simple example, consisting of a file with a single line.

An inline equation latexmath:[w] and bigger latexmath:[{\large w}]. With subscripts latexmath:[w_{ij}] bigger latexmath:[{\large w_{ij}}]. (As plain text, not an equation, we get _w~ij~_)

and turn it into a pdf using

asciidoctor-pdf -r asciidoctor-mathematical -o test.pdf test.adoc

My problem is that the inline equations (whether using png or svg mode) don't sit on the line with the other text - and it gets worse when there are subscripts. Does anyone know of any techniques to work around this situation?

Here's a screenshoot of how it looks:

[mojavelinux]

Asciidoctor PDF is centering the image on the line (emulating vertical-align: middle). There's currently no way to control the vertical alignment of inline images in Asciidoctor PDF. We could consider adding that as a feature. What you seem to be after is vertical-align: text-bottom).

[mojavelinux]

and it gets worse when there are subscripts

To a certain degree, this is just the way those are going to be (once the image can be aligned to text-bottom). Asciidoctor PDF doesn't see text with subscript. It just sees an image. So the bottom of the image, no matter where it is, would align with the bottom of the text. That's just a limitation of this integration approach.

[davidplowman]

Yes, I can see that for each embedded image you'd have to know the vertical coordinate of where the base of the text is supposed to be. Tricky! But thanks for the feedback.

[mojavelinux]

One thing I would recommend for asciidoctor-mathematical is to allow the image to be scaled by a fixed amount. That would allow the image to take up more of the line and thus align better with the existing text. I'm not sure how it determines the sizes now, but if they aren't adjustable, that itself can be problematic.

[ProgramFan]

I would like to add logic in asciidoctor-mathematical for a better inline equation layout. The feature I would like to have from asciidoctor-pdf, maybe from asciidoctor for inline images in general, is like the following:

1. allow setting image height to something like: X line-height, where x is a floating-point number such as 1.0.
2. allow adjusting the way inline images vertically align with the line, maybe something like 'center, bottom, top'.

This feature can only be provided as an extension to the inline image macro at the moment since inline markups are not part of the AST.

[ProgramFan]

In fact, I once tried to make the equations scale with the text, to make them the same size as the texts in titles, but without any successes. So at the moment, the equations in titles look extremely ugly since they are too small. The same happens in asciidoctor and asciidoctor-pdf.

[mojavelinux]

In the current version of Asciidoctor PDF, it's possible to make the image fit to the height of the line using fit=line. However, this includes the line spacing, so the image ends up being taller than the text.

I agree we can consider having control over the vertical alignment. Like I said, what you probably want is baseline so that the image lines up with the bottom of the text. (It already does center, and top and bottom would be above and below the text, respectively).

There are, however, limits to how much this can even work. Prawn doesn't really have the same concept of lines like HTML/CSS. So we can fake it to a point, but then it gets really fuzzy.

[mojavelinux]

There are actually two problems here. First is the vertical alignment of the image. Second is that there doesn't seem to be any way to influence the height of the inline image that Asciidoctor Mathematical generates. It only bases the size on ppi for PNG and zoom for SVG. That's where the fit=line option (or similar) might help...because it allows Asciidoctor PDF to adjust the size of the image.

Perhaps we need fit=line and fit=font-size depending on whether you want to fit the image to the line height or height of text (capital letter).

I once tried to make the equations scale with the text, to make them the same size as the texts in titles, but without any successes.

I don't think Asciidoctor Mathematical should manipulate the height and width itself (aside from the global scaling). It should be reporting the intrinsic height and width, but also include a role or option that allows the converter (or browser) to make the final adjustment.

[mojavelinux]

I'm starting to think a role might be best so that the HTML converter can control the size with CSS.

@ProgramFan Would you also consider adding support for the mathematical-zoom attribute to control the base zoom for SVG images?

[ProgramFan]

I can add the mathematical-zoom attribute, but how shall it be defined?

[mojavelinux]

I would just allow the user to define mathematical-zoom, convert it to a double, and pass it through to Mathematical using the zoom option.

[ProgramFan]

I don't quite understand the idea. Here is my confusion: asciidoctor-mathematical works as a tree-preprocessor and just replaces the stem macros with image macros, so it generates the images prior to asciidoctor-pdf. But the zoom value can only be determined in asciidoctor-pdf and can be different under different scenarios (for example in titles and paragraphs). How can asciidoctor-mathematical act on a value that is not defined?

My first imagnation of a solution is that the backends act on things like height=1em. And asciidoctor-mathematical just set these attributes on the images it generates. But this is just my own opinion.

[mojavelinux]

My first imagnation of a solution is that the backends act on things like height=1em.

Yes, I get that. But for environments for where that doesn't apply or it can't work, the zoom would be a way to influence the intrinsic size that mathematical produces. It's a global setting, defined by the mathematical-zoom attribute and passed to the Mathematical constructor. (It has nothing at all to do with the backend in use).

Regardless, we can't use height=1em as that's not a valid value for height. But we could use an attribute like fit=1em or a role like .fit-content or something.

[ProgramFan]

I see. I will add mathematical-zoom just like that.

[mojavelinux]

👍

We'll then continue this discussion about how to coordinate so that the converter can resize the equation to fit with the size of the text.

[mcp292]

Has any progress been made on this front?

[mojavelinux]

If there were progress, it would be reported here.

[mcp292]

Oh, got it!

[mojavelinux]

Related to asciidoctor/asciidoctor-mathematical#45.

[aburkov]

Hi! Is there a version of asciidoctor where the inline math characters are aligned with the text in the PDF output? If not, is there a way to tweak this somehow?

[mojavelinux]

The current state is reflected by this issue and the linked one. If there was a change, this issue would be updated or closed.

If you need help with a workaround, please ask in the project chat at https://chat.asciidoctor.org. Someone there may be able to help you.

[a4z]

It would be nice if there could be a solution.

If I make a PDF in slide layout, and change the default fonts, the generated SVG is embedded in the original size, and I have no way to do anything about this, since this seems to happen in asciidoctor-pdf

I had a very similar issue, PDF formula rendering, at a workplace, and this was the issue that I had to stick to another toolchain there.

ps, add the theme draft I use for trying to make PDF slide

extends: default


page:
  size: [12.8in, 7.2in] # 16:9 ratio
  margin: [1.0in, 0.67in, 1in, 0.67in]
  numbering:
    start-at: title

running-content:
  start-at: title

footer:
  height: 50
  recto:
    right:
      content: '{page-number} of {page-count}'
    center:
      align: center
      content: |
        Me, here


base:
  font_size: 24 # Increase base font size for general text

heading:
  h1:
    font_size: 36 
  h2:
    font_size: 32 
  h3:
    font_size: 28 

paragraph:
  font_size: 24 # Ensure paragraph text is also larger, if not already set by base

code:
  font_size: 22 # Code blocks might need a different size for readability

table:
  font_size: 22
  head:
    background-color: #d3d3d3

toc:
  break-after: auto
  font-color: #126180

heading:
  font-color: #126180

[ProgramFan]

I guess what we really need is a proper engine which can layout images with height be the same as the line height. For block math, the image shall be even larger. asciidoctor-mathematical renders inline and block math as fix-sized svg images, then rely on the backend to adapt the size. asciidoc, as far as I know, has not yet provided a way to enforce the required behavior for images.