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]

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.