Align text, images etc to the right (workaround)

[alex0]

The following two hacks work for plain text only (no references, tags etc).

---

1

To align so text to the right you can just use the following Hiccup syntax anywhere in a block:

[:div {:class text-right} "Text here"]

It creates a new line inside the block itself and align the text to the right.

---

2

Second option, align some text to the right on the same line, so you can have some text on the left and some on the right in the same line:

[:span {:class ra} "Text here"]

But in addition, for this second option only, you need to add the the following in your custom.css:

.ra{
    float: right;
}

(or use whatever class name you prefer instead of “ra”, remember to replace it both in Hiccup and CSS)

Result of the second option:

[alex0]

Edit: ignore the other methods to align images to the right, here there is the simplest one:

CC @smos @ari_notes @Ngungu

At the end of an image reference add {:class "right"} like this:

![](image.png){:class "right"}

And in custom.css add these rules (the first will work on desktop, the second on mobile):

.image-resize:has(.right) {float: right;}
.asset-container:has(.right) {float: right;} 

If you want to use :class "something" then replace the two :has(.right) with :has(.something) (notice the dot before the class name).

If you are wondering what’s the syntax to assign multiple classes: {:class "foo bar"} (I use a second class to invert the color of images in the dark mode).

---

Here there is the Hiccup to align an image to the right instead (with the method #2 explained above):

[:img {:src "assets:///path/to/graph/assets/example.png" :class ra}]

or you can use any URL (with https://) instead of the link to an asset of yours like the above.

Result:

[alex0]

Further improvement

The method above to align images suffers of a big disadvantage: you must use absolute paths that include your graph local path; this defeats portability.

Luckily @hkgnp developed this script that makes image render even with local paths:

const observer = new top.MutationObserver(() => {
  const graph = logseq.api.get_current_graph();
  let allElems  = document.getElementsByClassName("ra");
  allElems = Array.from(allElems);
  if (allElems.length > 0) {
    allElems.map((elem) => {
      let currPath = elem.attributes[0].value;
      currPath = graph.path + "/" + currPath.substring(currPath.indexOf("/assets"));
      elem.attributes[0].value = currPath;
    });
  }
});

observer.observe(top.document.getElementById("app-container"), {
  attributes: false,
  childList: true,
  subtree: true,
});

this script must be placed inside custom.js file in /logseq folder inside a graph folder and Logseq must be restarted for this to take effect. This assumes you used the CSS mentioned in the previous post (where a class “ra” i.e. right-aligned was defined). Then, you will be able to render images aligned to the right by placing something like this in a block:

[:img {:src "../graph/assets/example.png" :class ra}] Lorem ipsum dolor sit amet[...]

---

Use Macros for further portability

Instead of writing the hiccup syntax mentioned above in each block, one could define a macro and pass the URL to it, in this example the macro is named “image-right”:

"image-right" "[:img {:src \"../graph/assets/$1\" :class ra}]"

so in your config.edn file you have to find the section about macros and insert the above line. You should have something like this:

:macros {
        "..." "..."
        "image-right" "[:img {:src \"../graph/assets/$1\" :class ra}]"
        "..." "..."
        }

where "..." "..." represent other macros that eventually you defined.

Then you can just use this in your blocks:

{{image-right example.png}}

In case in the future you decide to change the impementation of “image-right” you would need to update only the config files and not Markdown files of your graph.

[smos]

Hi,
it seems that’s possible to add a custom CSS class also in Markdown (I don’t know if this is a new feature or not…), like so: ![](../assets/image.png){:class "ra"}
So you need only the custom.css changes and not the custom.js changes.

It seems to work, I don’t know if it is a sort of hidden “feature”…

[alex0]

Apparently you can add a class to an image but I was not able to apply the “ra” one to align it to the right, did you?

[smos]

You are right, float does not work, because for a Markdown-added image it should be applied to div.image-resize that contains the image.

It should be possible with the :has CSS pseudo-selector, something like this:

    div.image-resize:has(.ra) {
      float: right;
    }

but it’s still not supported in Logseq 0.9.8 (Electron 20.3.8 if I’m not wrong…).

So your method is still the valid one.
Sorry, I did post a little too fast…

[alex0]

No problem, this will serve as a reference for when Electron and Logseq will be updated, thanks!

[alex0]

@smos

Logseq master branch has been updated to Electron 24, so probably we will get :has() in the next version, maybe 0.9.11

[ari_notes]

@alex0 wondering if this is working at this time (0.9.11), I am looking for a simple way to have images centered (bullet-indent-aware centering), in the same way that LATEX math output gets centered in the page?

Also once I add the custom CSS in the logseq configuration,

    div.image-resize:has(.ra) {
      float: right;
    }

How do I ‘invoke’ the custom alignment in the image/block?

[alex0]

I have not tested it but it should be:

[](../assets/image.png){:class "ra"}

[Ngungu]

I have put the macro in the config.edn file, added the ra class to the css file, but I cannot get this to work.

As you can see, the image is rendered as that tiny square in the top right corner.

BTW, I did close and relaunch Logseq.

[Ngungu]

Thanks for the amendment. This is what I get:

on the basis of this:

I have amended the custom.css file too.

[alex0]

@Ngungu if you remove the class: “right” part the image is rendered correctly, right?

This is very strange because we are just adding a class, not editing the link in any way. And your result is the same of a broken link.

[Ngungu]

OK. so what is happening is that if I drag the image from the assets folder onto Logseq, it is rendered correctly, and with{:class "right"} added it is pushed to the right.

But the text is not wrapped around it.

[alex0]

@Ngungu you need to write the image reference and then the text on the same line. Does it work with this tip?

[Ngungu]

Yep, that works.
Many thanks for your help and the code.

[_fl0]

Side question: what font are you using in the screenshot? It looks quite well.