Issues with text-align

[PhilippCh]

What I’m trying to do

I’m trying to justify text using a custom css snippet in Obsidian Desktop (Windows) and Mobile (iOS). The following snippet seems to work fine on Windows, but text-align: justify isn’t recognized on iOS at all. text-align: left and text-align: right are working fine on Windows and iOS, it’s just justify that’s causing the issue. It also looks fine on Windows using the console command this.app.emulateMobile(true).

The issue only happens in edit mode, in reading mode both iOS and Windows are looking identical. Does anyone have an idea on how to debug this?

.longform-leaf .cm-line,
.longform-leaf .markdown-reading-view p {
  font-family: Menlo, 'Courier New', sans-serif;
  text-indent: 50px;
  text-align: justify !important;
}

On Windows it looks like this:

On iOS (only in edit mode, reading mode looks fine) it looks like this:

[gino_m]

Any of the methods mentioned in this thread work for you?

[PhilippCh]

Unfortunately not, both selectors result in the same left-aligned text. To illustrate that the element is actually correctly selected I added a red color to the text.

.markdown-source-view.mod-cm6 .cm-line, .markdown-rendered:not(.kanban) {
    text-align: justify;
    text-justify: inter-word;
    color: red;
}

[gino_m]

Same thing here. For the person coming up with the answers, it works, but it does not work for me either.
A pet peeve of mine while I’m on my pad…

[ariehen]

Can confirm text-align: justify is not working for me in editing views either (iOS, new mobile vault). right and center work fine (as well as red), so the selector is fine.

Something must have changed because it used to work (see screenshots in linked post). Hmm

[gino_m]

The following works:
<p align="justify"> … </p>

It does justify the text, but then all other formatting goes on the blink in the file…

[PhilippCh]

Wait, how would you insert this into a CSS snippet? I‘m guessing you can‘t, right?

It‘s too bad we can’t debug the iOS WebView properly when it‘s installed from the app store…

[gino_m]

I used this in the file. As I said, this is completely pointless as the Live Preview is rendered useless.

[ariehen]

So, I did some poking around. Using this CSS:

.markdown-source-view.mod-cm6 .cm-line {
    text-align: justify;
    text-justify: inter-word;
    color: red; }

I see this with Obsidian 1.4.4 (99) - editing view (live preview):

And this in Obsidian 1.4.5 (101) - editing view (live preview):

So, something changed between v1.4.4 → v1.4.5.
I don’t really see anything in the v1.4.5 change log about the editor other than:

• Live Preview: Reduce flickering and flashing when selecting text.

I’ll ask around…

[PhilippCh]

Thanks for digging into this! Are you able to install the older versions as a supporter (since I see you have TestFlight access)? If so, that might be a temp workaround for me.

[ariehen]

You can get early access (desktop and mobile) and support the team with the Catalyst license - Obsidian Help, but as you can see from the screenshots TestFlight builds expire. v1.1.4 (99), where the mobile justify is working, expires in ~10 days, so it would be a very temporary workaround.

[gino_m]

Guys, I’ve got JB access and could go back to any version but I do not remember getting any CSS with justified to work on my 15.7.6 iPadOS installs since I first started trying…? I saw others having probs on the forum too.

[PhilippCh]

Thanks for your input! So what I’ll try to do is install the android app since I’ve heard it’s easier to debug the WebView there and see if obsidian adds some weird wrappers around these parts that wreak havoc on the CSS that works otherwise.

[ariehen]

A kind user on Discord checked for me using their Android phone, and the text justify is working for them using the above CSS. So, for some reason, it seems an iOS/iPadOS issue at the moment.

There may be nothing to see, but I’m interested to hear if you find anything.

[Jopp]

Yeah i confirm, text-align: justify seems not to work on iOs.

I tried to resolve the same bug many times for one of my users in my theme Dune, but didn’t succeed at the end.
Must be a bug in Obsidian and since alignment seems not that important nobody noticed it till now

[nereid]

Seems that this problem is not resolved yet…