Vertical alignment of inline images

Questions & Help
1

HI,
Is it possible to use a kind of different vertical-align style on each image from assets, in text?

2

Please provide examples of how things look now and how you would prefer them to look instead.

3

I tried that. It works with text, but images are rendered as text, or not found.

<span style="vertical-align: -10px;">texte</span>
<span style="vertical-align: -10px;">![Bob.svg](../assets/Bob_1749752158448_0.svg){:height 37, :width 43}</span>
@@html: <img src="../assets/Bob_1749752158448_0.svg" style="width: 43px; height: 37px; display: inline-block; vertical-align: -10px;"> @@
4
  • The html parser of Logseq is very basic.
    • It doesn’t support nested code, it treats it as plain text.
  • If you need to alter the rendered result, could either:
    • use custom.js to code a javascript observer that applies the style afterwards
    • use custom.css to apply the style based on the title (i.e. the filename), e.g.:
      img[title="Bob.svg"] {
  vertical-align: -10px;
}
5

Thanks,
The problem is that each image (hundreds of them) has a different vertical alignement in the texte:
text img text img text etc
I can’t write a distante css for each of them… I just need a simple way, if anyone exist, to apply a style=“vertical-align: xpx;” to each image.

6

No simple way in Logseq. Consider a different tool.

7

In fact, the problem comes from the fact that Logseq apparently does not recognize a relative URL in an IMG tag. With an absolute URL, it works well.

texte @@html: <img src="/Volumes/Samsung T5 2 To/Logseq_SFEA/assets/Bob.svg" style="width: 43px; height: 37px; display: inline-block; vertical-align: -8px;"> @@ texte
8

Okay, I resolved to leave custom.css open to create an adjustment for each image by file name, testing the result …
Regarding the relative size of an image, it seems that width: xvw; works better than a percentage, which only decreases the appearance and not the block.