Align text, images etc to the right (workaround)

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


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.


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:

    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:


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.



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) { => {
      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.