[Pending] Code misalignment

In Drafts the first line of block graphics in the following is misaligned with the remainder - in Preview.

```
┌─┬┐ ╔═╦╗ ╓─╥╖ ╒═╤╕
│A││ ║ ║║ ║ ║║ │ ││
├─┼┤ ╠═╬╣ ╟─╫╢ ╞═╪╡
└─┴┘ ╚═╩╝ ╙─╨╜ ╘═╧╛
```

If I put a blank line ahead of the top of the boxes the alignment is fine. (So is a line with a space or a dot
I will say that vertically joining up doesn’t happen. (That might be inevitable given the font choice.)

Actually, the line with the “A” in is misaligned when editing but comes right on Preview.

I’m not 100% sure this is a bug - but it might well be.

I’ve only tested on Mac.

Drafts Version: 22.1.11
OS Version: iOS 14.0.1
Device: iPad

Here’s what I get for the HTML. I can see there is an extra space introduced after the opening code tag.


<body>
  <pre><code>┌─┬┐ ╔═╦╗ ╓─╥╖ ╒═╤╕
│A││ ║ ║║ ║ ║║ │ ││
├─┼┤ ╠═╬╣ ╟─╫╢ ╞═╪╡
└─┴┘ ╚═╩╝ ╙─╨╜ ╘═╧╛
</code></pre>

</body>

Same extra space after the opening tag, and subsequent misalignment is generated with a draft content like this:

```
123
123
```

So, I tested using tab-indenting instead of triple backticks. I got the Preview problem repeated. This time, though, the “A” line is not misaligned.

so is this an issue with the markdown generation!?

HTML generation from Markdown. But I updated to yesterday’s beta release and there is no longer a leading space for me. Though there is nothing in the change log to indicate a change to this.

1 Like

Thanks for the hope, @sylumer. :slight_smile:

I can’t imagine @agiletortoise hoping that went unnoticed. :slight_smile:

I’ll test today and see whether both problems are fixed. Preview was just one of the them.

Meanwhile Menlo seems to be the best (but not portable) font for rendering box diagrams this way.

So, with the latest beta (on a 12.9” iPad Pro):

  • Three backticks renders fine in Preview but the first line is indented in Edit.
  • Four spaces before each line is fine in Edit but in Preview the first line is misaligned.

@sylumer, I’m not sure whether it was a Mac beta you were testing in or iOS or iPad OS.

(In md2pptx we use 4 spaces for “code” and last night I proved to myself that PowerPoint - via mdpre and then md2pptx - copes with character box graphics. Hence the “Menlo” font recommendation.)

1 Like

And I think I’m seeing the same thing on the latest Mac beta.

I retested with a basic Swiss preview action on iOS & ipadOS this morning. Haven’t update or tried on Mac.

1 Like