Justify text inside column block

[clemc21]

Hey everyone! I’m having a small problem of format with obsidian

What I’m trying to do

I’m trying to have all my notes justified, even inside columns created with the plugin “Obsidian Columns”

Things I have tried

I’m actually using this snippet, that I found thanks to the answer of Scribe on this post (Align text Justified in Obsidian):

/* reading mode */
.markdown-preview-view p {
text-align: justify;
text-justify: inter-word;
}

/* source view and live preview */
.markdown-source-view.mod-cm6 .cm-line {
text-align: justify;
text-justify: inter-word;
}

But it doesn’t actually works inside de columns of the plugin “Obsidian Columns” (GitHub - tnichols217/obsidian-columns)

here’s an example:

```col-md
flexGrow=1
===
![[Pasted image 20230503195341.png]]
```
```col-md
flexGrow=1
===
Text that i want to be justified, but the snippet doesn't actually work inside the column
```

Is there any way I could adapt the snippet to work inside the block or do I need to modify the column block directly?

Thanks a lot in advance!

[Olondre]

I don’t use obsidian-columns, but maybe just targeting the codeblocks works:

/* READING MODE -> col-md only */
.markdown-rendered pre [class^="language-col-md"] {
  text-align: justify;
  text-justify: inter-word;
}
/* LIVE PREVIEW / SOURCE MODE -> all codeblocks */
.HyperMD-codeblock {
  text-align: justify;
  text-justify: inter-word;
}

I can not find a way to specifically target the col-md codeblocks for live-preview/source mode.

[clemc21]

Thanks a lot for your help!

The snippet you sent me works perfectly for the reading mode but not for the live preview.

As I don’t mind targeting only this type of block I changed your snippet this way:

/* READING MODE -> col-md only */
.markdown-rendered {
  text-align: justify;
  text-justify: inter-word;
}
/* LIVE PREVIEW / SOURCE MODE -> all codeblocks */
.HyperMD-codeblock {
  text-align: justify;
  text-justify: inter-word;
}

And it now seems to be working for preview as well!

However I don’t have any knowledge in css, could you tell me if it’s redondant with the already written snippet I use for the rest of the note? Should I only use the new one or keep all of it?:

/* reading mode */
.markdown-preview-view p {
	text-align: justify;
	text-justify: inter-word;	
}

/* source view and live preview */
.markdown-source-view.mod-cm6 .cm-line {
	text-align: justify;
	text-justify: inter-word;	
}

/* READING MODE -> col-md only */
.markdown-rendered {
  text-align: justify;
  text-justify: inter-word;
}
/* LIVE PREVIEW / SOURCE MODE -> all codeblocks */
.HyperMD-codeblock {
  text-align: justify;
  text-justify: inter-word;
}

Thanks a lot in advance!

[Olondre]

As you are always targeting the same properties, you could shorten this a bit:

/* reading mode */
.markdown-preview-view p, .markdown-rendered pre {
	text-align: justify;
	text-justify: inter-word;	
}

/* source view and live preview */
.markdown-source-view.mod-cm6 .cm-line, .HyperMD-codeblock {
	text-align: justify;
	text-justify: inter-word;	
}

[clemc21]

Thanks a lot for your help! Have a nice day/evening/night!