[iOS] Justified text alignment not working in Live Preview

I copied the snippet from this well-liked post. The snippet did not work for me on PC initially. It worked only when I separated the two parts of the code – this initial kink might have had to do with what custom settings of the theme I was using (probably Blue Topaz at the time).

In the meantime, following a discussion with Dune Theme creator @Jopp on GH, I came to the conclusion that no matter what we’re trying to do, justified text doesn’t work for me on iOS in Live Preview.

Does anybody else have this issue or have a solution?
Portrait mode work necessitates justifed text, especially in my native language with long words.

Cheers

You could try adding a mobile selector to the css. This works in the default and Minimal themes.

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

Doesn’t work in default mode, Minimal Theme, or virgin vault. I detected the text alignment in the settings menu and was working in reading mode, but not in live preview or source mode.
Two remarks:

  • What’s that comma doing in the second part of your code (after is-mobile)? I tried deleting it and was having even less effect than before.
  • Again, tried applying only the mobile part (first part of your code) – nothing doing. No text alignment in the menu text or reading mode, either.

This is getting really frustrating.

(— iPad mini 4, 15.6)

Hum, not sure. Works for me.

Snippet off:

Snippet on:

iPhone - iOS 16.4.1) Obsidian 1.4.3 (95)

1 Like

Thanks for your endeavors.
Not working. Only the menu text and reading mode are text aligned.
All in default theme, no plugins.

Yesterday I deleted the cache and reinstalled the app (not for this per se, for some other thing, but still, my Obsidian mobile environment is rather fresh).

Two more remarks:

  • The iPad mini is not a mobile, it is a tablet, with a screen resolution like a laptop’s.
  • The Material Flat Theme (that I was just fiddling with) has two Floating Button settings: one for mobile and one for desktop. When I toggle the mobile one, nothing happens. When I toggle the desktop, the intended action (for mobile) is activated (toggle is on or off).

So, the question is: do I have a not-mobile then?

Yes, iPad is considered a mobile device.

AFAIK anything using the mobile Obsidian app (Android tablet, iPad, phone) can be targeted with .is-mobile. There’s another selector, .is-phone, that’s just for the portrait orientation parts of phone interfaces.

The first snippet works on iPad over here:

YKBTID (yaknowbetterthanido). It was mostly frustration talking. I mean it is supposed to be a simple thing. I solved far more difficult techie tasks in the last few months.

Then I’ll stay a leftie on mobile. What can I do…

I tried it on landscape mode now: no…

Hello!

Thanks for u work!

This snippets works on iPhone in all modes. Can you please tell me how to disable text justification for cards on the Kanban board?

Just to be clear: On mobile only or desktop and mobile?

In Live Preview and Reading modes, justification in the editor except in Kanban boards. That correct?

Just to be clear: On mobile only or desktop and mobile?

On desktop and mobile.

In Live Preview and Reading modes, justification in the editor except in Kanban boards.

All right!

@ayli.voltok

In my testing (same .css file synced via Obsidian Sync and enabled on mac and iPhone), .is-mobile isn’t necessary here for both desktop and mobile. Give this one a try - you can change justify to right to clearly see what’s going on.

/*- justify text in source/live preview/reading modes except in kanban -*/
.markdown-source-view.mod-cm6 .cm-line, .markdown-rendered:not(.kanban) {
    text-align: justify;
    text-justify: inter-word; 
}

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.