Changing viewmodes interferes with userstyle rendering

  • Joplin Version 2.8.8 (prod, win32)
  • Windows 10
  • Dropbox sync

I have learned how to customize my rendered texts using very simple CSS formatting in the userstyle.css file, but I noticed some strange things when I switch view modes. When I first launch the desktop app, the rendered text panel obeys my parameters correctly. Then, each time I click on the "alternate editor" button, or the "alternate editor layout" button, the rendering behaves differently in a manner that seemed a bit unpredictable at first. Sometimes, it never goes back to my customized formatting.

After much trial and error, I think I understood what is happening. I realized that I used to mistakenly think that switching editors and switching the layout were the same thing. I don't use the richtext editor, but had the habit of clicking on its button just to turn off the split panels. When I do that, the richtext editor displays fine my custom fonts, but the Markdown rendering is affected when I switch back, and the body font changes (probably to the default parameter, which, in my computer, seems to be Arial). The custom code fonts don't seem to be affected.

In summary: when I just click the "alternate editor layout" button (that I now know stays on the Markdown editor), and cycle through the split and unsplit panel views, everything works fine; when I switch to the richtext editor and back, the Markdown editor doesn't render my custom body fonts anymore, in any view.

I will show it with a note I did as a little Markdown cheat sheet for myself.


1. First launch of the app

Normal split view of an untouched Markdown editor

The body custom font is Noto Sans, and the code custom font is Roboto Mono. The weird backticks inside the parenthesis were just me not managing to make (` `) and (``` ```) display the way I wanted.

2. Switching back from richtext editor

Split view back from switching editors

The body font has changed, seemingly to Arial (you can see better by comparing the italics), and the correct font will never come back unless I relaunch the app. For some reason, now it displays the backticks inside the parenthesis the way I wanted.

3. Richtext editor

Single panel view of the richtext editor

The richtext editor displays fine all the time, except for the non rendered text, which becomes identical to an inline code.

Conclusion

I know that I can just avoid these problems by never touching the richtext editor button ever again, but I think that the developers should know about this behavior. Also, the richtext panel is a neat way for me to proofread my notes, as it has spellcheck. That's one of the reasons why I got used to switching to it, so, it would be nice if this little annoying inconvenience could be corrected.

Could you give an example of what CSS you are using in userstyle.css?

The markdown editor does too, its just in another menu currently (Tools > Options > General > Enable spell checking in Markdown editor?)

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