Inline Image Height, Alignment, Padding & Margin

One of my favorite Coda tricks is to use Image() with Concatenate() or Format() to great effect.

However, the way the images currently render inline is biased to the top. In my example below, you can see the pink line represents the ‘normal’ line height for the text and emojis. The green line indicates the top and bottom of the Image(), my user profile / headshot.

In this case it is set too high and increases the line height such that it makes any line with an image look very awkward. The larger the image, the greater the distortion.

  1. Is this the desired behavior, @Codans?

  2. Does anyone know any ways to mitigate the issue?

11 Likes

I’m definitely interested in any updates here. Anyone have any intel?

Hey @Johg_Ananda and @Alexander_Gaeta1! Thanks for reaching out. While this is not possible at this time, this sounds like a feature request the Coda team has been tracking to support top alignment when an image is inserted in a line with text. That said, we have moved this post into the Suggestion Box for other members of the Community to chime in on this. We’ve gone ahead and tracked your vote for this feature formally.

1 Like

Alllll the upvotes…this is another one I regularly work around, but working around is a pain.

@Johg_Ananda, my workarounds usually use one of the following:

The Handlebars Templates Pack is often extremely helpful as well.

Example doc with explanation:

1 Like

I have the same problem, as I prefer to have “ICON + NAME” identifiers on my documents:

This problem messes up with table row heights as well:

I’ve mitigated the problem using a CSS injection browser extension:

image

However, I haven’t found a way to overcome this problem on mobile app. Also, there are other people facing the same problem, as you can here: Vertically align Icon and Name

I’ve also tried the LaTeX solution proposed by Amy, but in my case the SVG solution was the closest I could reach to my neededs (I’m a portuguese native speaker, and LaTeX solution didn’t perform well with accents - note the “extra” space between “ã” and “o” on “Cirurgião” word):

I hope you can provide a fix for this, or a native feature that allows a display name which is a combination of an icon and a text.