Typesetting alignment

[zanodor]

Hi,

Just tried your theme and some setups.

Block is working beautifully to center-align my text (a must for me because -- like German -- Hungarian has some pretty darn long compound words).

I am wondering why this snippet I found on the Obs Forum is not working well in Live Preview mode?

/* 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;   
}

More importantly, where is your snippet for Live Preview Block Alignment located?

Cheers, Z.

[Jopp-gh]

Mixing dissimilar snippets isnt an issue, but mixing snippets with themes may conflict and override rulesets and as a result, Obsidian will pick one over another css rule

Is your readable line toggle on or off? preferences>editor>display>readable line width Readable line width is important especially for justified alignment

I just tested your snippet on a default vault, German document, reading view, with "readable line length" on and didnt appreciated how unbalanced words were distributed for justified alignment.

I see how mozilla, w3schools and other websites recommend additional spacing declarations for:

• word
• character
• auto

I tested all three and did not see any difference with these variables added to Dune

Would you mind to submit a sample file and comparison screenshot here in this thread, so I can investigate further

[zanodor]

Thanks for your interest, but that has nothing to do with your theme, per se. I took the liberty to hijack this thread to ask about something else -- apologies.

I was using that snippet before installing your theme and has not been working for me in Live Preview.
I -- the layman -- looked into the CSS of your theme but couldn't use the lines pertaining to text justification, alas.

I am staying with your theme for now because the justified text is all important for me (I can't believe how such a simple thing wouldn't work for me, I mean the snippet I took from the forum).

But there is another interesting thing...I installed the theme on the iPad as well and when I selected 'B' for Typesetting Alignment, it worked for once and never again... I disabled the other text align css snippet in the meantime.
No matter what I did, only Left Alignment was working instead of Block (I have no use for right and axis alignment, which were working but not block).
Was working initially and never again.
On Linux and Windows, it is working, though....

Anyway, don't trouble yourself with my ramblings, enjoy your Sunday

Cheers

[Jopp-gh]

Alright if snippets do not work, then because they are obsolete or poorly tested, not optimized, made with little study. I suggest people to post feature requests instead to mix snippets with themes, bc the longer a code becomes, the more likely snippets wont work, if themes touch the same parameters / rules.

The other day i added basic support for tablets using an emulator. This "basic" means, i tried to correct some bigger issues for tablets - how well features work on that device is hard to tell for me, because an emulation is not 100% identical to a real tablet.

Some miscellaneous / generic tips. If something does not work for you, try to make a new Vault, and activate only Style Settings and Dune. Also, try to switch themes, reload or quit Obsidian.

Anyway, I will check why text alignment does not work on your tablet, i guess it is simple. Maybe text-justify: inter-word; is really needed in some circumstances - on my side it did not change anything in worse or in better so i will add it next time to Dune's rule sets :)

[zanodor]

I was playing around on mobile and tried toggling off and on as per your suggestions but no dice. Even in a virgin demo vault with no snippets or any other theme, I couldn't make Live Preview text justification work, either with the snippet or with the block text alignment in your theme's Style Settings setting. I also truncated the snippet code, deleting text-justify and leaving inter-word, but was not working. At least on Linux, where I spend most of my time (and also on Windows), Live Preview is okay with your style settings.

I'll report back when I find something.

[zanodor]

Update.

I separated the Preview and Live Preview snippets and managed to make the latter work outside of your theme, on desktop, but not on mobile.
This is also to confirm your theme is not the only one not to work on mobile (I have an iPad mini 4), as regards Live Preview mode text alignment.
Blue Topaz's Style Settings is also not working.
I also find the comments in its settings strange:

You are welcome to remove my remark and photo once you acknowledged it.

[Jopp-gh]

In Dune, text alignment isnt bound to any device be it mobile or desktop, it should work independently. In my tests alignment works both on: phone, desktop

I checked my code for leaks that could influence or compromise the effectiveness and correct operating of my code but on a first check, I did not find any generic or overwritten rule.

As an alternative, did you try to add cssclass: align-b to your yaml header? This option works just locally, per note. I'm very curious why text alignment of Dune is not working on your phone, tablet. To solve this issue I need reproducible steps.

On mobile, did you update Obsidian to its latest version?

if you go to preferences>about> you will see Obsidians version, it should be "1.4.3 (95)" for mobile and "1.1.16" for desktop

On mobile (phone, tablet) you simply update Obsidian through the gstore, but for the desktop version I recommended you to trash the old Obsidian app and install a brand new copy.

[Jopp-gh]

Blue Topaz is a great theme, but was not adapted for version 1 of Obsidian, so it is an obsolete theme right now. Therefore, it wont work property

Also, please update Dune to its latest version. Today or tomorrow I'll look into text alignment

[zanodor]

I am on latest installers and versions everywhere, latest Dune everywhere (I mean Dune desktop was fine). Because I need text alignment in all my notes, I never put CSS class anywhere. Adding cssclass: align-b on mobile did not make a difference. Reading mode works, also I can see text alignment on the sidebar menu changing, but not functioning in Live Preview. Especially most important on mobile portrait mode.

[Jopp-gh]

Alright, at the moment I need to ask you to follow every step I can think of to isolate this bug, this is usual procedure.

A moment ago i checked how alignment (justified) on phone works, both LP & RV with cssclass: align-b (local) on and cssclass: off ( but enabled globally, through the style settings popup)

All I can do now is to speculate where this bug originates, will check live preview

[zanodor]

I fiddled around some more in a demo vault with no snippets and plugins. Neither global nor CSS-enabled text alignment works in live preview mode. Nor does a snippet that I managed to get to function on desktop.
I restarted iOS (once) and remembered to quit Obsidian after each change as well.

Could be iOS then (from your screenshots I take it you have an Android device), in which case I should take it to the OBS Forum. But from my recent experience, they've got enough on their plate already and chucked out the mobile forum too.
I spend my time mostly on Linux now anyways. My vault is simply too large for iOS and I cannot wait 40 secs to access my vault each time Obs quits on me..

Cheers

[Jopp-gh]

Please check out the snippet below ( worked for me on android, sandbox vault - independent of my theme, in live preview and reading view), but you need to add cssclass: align-b to your test note after activating this snippet under preferences > appearance>css snippets>

If this works for you on a sandbox (virgin) vault, then I will proceed and make this rule global

.is-mobile .align-b {
  text-align: justify;
  text-justify: inter-word;
}

[zanodor]

Only works in Reading Mode. Tried it in iOS sandbox, in default theme and Dune.

[Jopp-gh]

One more thing that comes to my mind is, you could try to flush Obsidians app cache.

First, backup your invisible folders inside your vault on mobile. This folder is called ".obsidian" and contains your plugins, snippets and temporary files.

Then search the configuration panel of Obsidian on your iOs device iOs>preferences where you manage installed apps, pick Obsidian, then find a button in there to flush its caches.

[zanodor]

One more thing that comes to my mind is, you could try to flush Obsidians app cache.

First, backup your invisible folders inside your vault on mobile. This folder is called ".obsidian" and contains your plugins, snippets and temporary files.

Then search the configuration panel of Obsidian on your iOs device iOs>preferences where you manage installed apps, pick Obsidian, then find a button in there to flush its caches.

I was actually envisioning an imminent refurbish in my Obsidian folder (now that I have jailbreak) but right now I am having git issues, so after recloning a fresh branch, I will have accomplished what you have suggested, in any case. I'll keep you posted.

[zanodor]

No. Nada. Zilch. Blue Topaz also won't do it. I deleted even the app, not only the cache (the app gets a new unique container on reinstall).
I guess it must be iOS or my iPad.
Thanks for all the "thinking together".

Now I need to take a break -- from all things tech....

Best, Z.

[Jopp-gh]

Hello, In my last update I added a compatibility rule, maybe this helps to isolate our issue a bit more. May I ask you to try out a sample note ? Frank Herbert.md

A new vault and a simple snippet (see below) does the job, do not load any plugins or themes

.is-tablet .align-b {
  text-align: justify;
  text-justify: inter-word;
}

(.is-mobile is for phone-like portable devices but .is-tablet works too) Please write cssclass: align-b, in your yaml header of the attached test note above, this is just a check. Maybe your notes have "illegal characters" in it and stop a proper rendering in obsidian.

Once I had a rendering issue with code blocks, they did not load in source view because I had overseen 2-3 rules and each rule tried to apply different font settings. Your issue may be related to fonts or how fonts are configured on your device. Bad Fonts can cause servere issues, no matter if on desktop or mobile / tablet

I keep this bug report open for the time being in the hope to get some more ideas.. thanks for your patience

[zanodor]

Done as instructed. Result: same thing as before: only reading mode works. Live Preview doesn't.

On "illegal characters":

• I used to have BOM in every single file (some unwanted residue following docx > txt VBA macro conversion), but I got rid of those. And of course, no issues like that in freshly made vanilla vaults.
• It's not diacritics, because a) German wouldn't work either b) I tried several vanilla vaults with tiny bit of English texts.
• What other thing could be illegal at my end?

Remember I wrote that one time it was working...? I don't think so now. I think some text was roughly aligned well enough with short words at the end and I thought it was working. It was never working on iOS. It is a curse.

Fonts... I remember wanting to install some fonts on iPad... I deleted the app. There are no unusual fonts (I double-checked in root file system as well).

At this point I'm clutching at anything... I have no idea. It is probably the device, not Obsidian or any vaults.

By the way, <p align="justify"> ... </p> does justify the text, but it's stupid to use in Obsidian, as all formatting is lost.

Thanks for all your endeavours,

Z.

[Jopp-gh]

<p align="justify"> ... </p>this could be a good trace

So I made the code below, it worked for me on my phone (android) in both views, LP & RV, no theme, no plugins. I'd be very glad if this helps you too. Last thing before I go to rest.

Again,Cssclass: align-b is required for this test. The text will reflow after a few seconds only, not immediately after typing the full css class, (at least in my tests). Let's try:

.align-b p,
.align-b div.cm-line {
  text-align: justify;
}

[zanodor]

RV okay, not LP. Schade/Scheiße.

[Jopp-gh]

I do not know about iPads in specific, but on desktops a new user account resolves a lot of problems as well. If you found any solution, some of my tips helped you or you consider this issue as resolved, then feel free to close this bug report, thanks.

[Jopp-gh]

I stumbled over a class I did not know .is-mobile.is-ios. Try this:

.is-mobile.is-ios .align-b p,
.is-mobile.is-ios .align-b div.cm-line {
  text-align: justify;
}

[zanodor]

I stumbled over a class I did not know .is-mobile.is-ios. Try this:

.is-mobile.is-ios .align-b p,
.is-mobile.is-ios .align-b div.cm-line {
  text-align: justify;
}

I tried it with your theme, but didn't work. Hopefully Obsidian sorts it out now that more people found the issue. Cheers

[Jopp-gh]

Merry Christmas!

not sure if you are still using my theme, anyways you get good reasons to return. Highlight no. 1 is Zen mode with several intuitive functions, but there is much more, especially under the Fonts section. Also, finally I managed to add a decent-looking justified alignment. Please see by yourself:

Justified should work nicely in most cases, there are still some edges left which I try to solve in future updates. Finally Dune has reached its design goals, my project enters now in maintenance mode. This means no other features will come, but the exiting code will get some fixes, more efficient code and some adaptions to work well on newer versions of Obsidian.

Dune is ready and should work seamlessly between phone and computer

Note If you are interested to help me out with the manual of Dune (eg proofreading, screenshots) or other aspects like promotion, marketing, wishes and bugs, then please let me know. We could use jabber or any other modern and safe de-centralised communication channel.

Have a good time! jopp

[zanodor]

Using GruvBox with some modifications for now. (The light version of which resembles yours, actually.)

Thanks for the message.

Frohe Weihnachten!