Is there a way to edit the preview font size?

[MorenoMdz]

There is a big discrepancy in sizes, then editor is about a font size 8-10 while the preview is much bigger, also I can’t scroll down in the preview window, it goes just a little bit but not the entire document. Perhaps it is a scalling issue (Using a 4k monitor laptop with scalling to 200%) or did I miss where I could configure the preview window?

Overall I like the application a lot, just this issue and I can then sit with this program for good.

Thanks!

Edit: I figured out that reading the docs is a good thing. The scroll is still not ideal at the preview window but setting the editor font to 14 and the preview font to 10 via the custom CSS solved it. I tried to add margin or padding to the bottom to the preview body but nothing happened, is it possible?

[CalebJohn]

In general with the user CSS it’s trial and error, it should be labeled as experimental or something because nobody really knows what will work and what doesn’t, in general most things are supported though.

[greiggy]

Another take on preview text size. It’s too small on the iOS apps (my iPhone 6+ and iPad mini). I have good eyesight but I do a lot of speaking/presenting and need notes I can read at a glance.

Is there a way to tweak the CSS – and the appearing size of the rendered (preview) text?

Joplin has a whole lot going for it and I would like to use it more, but this is a limitation for me at the moment.

[omega3]

@MorenoMdz

the editor font to 14 and the preview font to 10 via the custom CSS solved it

Can you paste your css code, please.

[dpoulton]

The editor font size is set in Joplin's settings. CSS that sets the main text elements of a note in the viewer are as below. Change the pixel size to meet your needs.

body {
    font-size: 12px;
    /* sets body text font size */
}
table th, table td {
    font-size: 12px;
    /* sets table cell and header font size */
}
code {
    font-size: 12px;
    /* sets code font size - fenced code and pre */
}
.inline-code {
    font-size: 12px;
    /* sets inline code font size - code element does not seem to control this */
}

The different elements have been listed separately so you can add any other changes you may want to each one.

These threads on the forum have other examples of using both userstyle.css and userchrome.css

Joplin Customization

This page is a collection of CSS tweaks to customize Joplin (e.g. editor, rendering, ...) To discover CSS classes and types refer to this comment Plain editor (no color, no font changes) userchrome.css Joplin version tested on: 1.1.4 div.CodeMirror-lines * { font-size: inherit !important; color: black !important; font-weight: normal !important; text-decoration: none !important; } Example [plain_codemirror] /ref dpoulton comment Dark Theme Mermaid Flowchart (Flowchart only) users…

Share your CSS

I would be curious if anyone would care to share their userstyle.css snippets and perhaps a screenshot?

[omega3]

The problem is that it doesn't work in case of last appimage. I reported a bug:

mismatch between font size of code editor and viewer

I thought that maybe two separate settings for editor and preview are possible. It looks like just using body doesn't cover preview font size.

[dpoulton]

I have been using the AppImage on Linux Mint for some time (including the pre-releases up to 1.2.4), and the font size control using Joplin settings for the editor pane and userstyle.css for the viewer pane has always worked. However from the image in your GitHub issue it looks like it's the editor font that is huge as opposed to the viewer. Do you want the editor (left pane) font smaller or the viewer (right pane) font larger?

If the former, what font size did you enter in Tools > Options > Appearance > Editor font size? Try setting it to 12.

Also, have you fully shut down (File > Quit) and restarted Joplin after changing the userstyle.css file?

[omega3]

I don't know what was the real reason but I got it finally.
I had userstyles.css instead of userstyle.css. And I had two files that were created in .config/joplin-desktop/tmp so I removed them.

Now I have: userchrome.css and userstyle.css with the above css code.

Thank you very much.

[dpoulton]

@omega3

Now I have: userchrome.css and userstyle.css with the above CSS code.

I do not know if you meant this but you do not need the above CSS code in both those files, only in userstyle.css.

The look of Joplin and the editor can be modified using userchrome.css (Red area in the below picture). The look of the viewer pane is modified using userstyle.css (Green area in the below picture).

These two areas use different css element / class names so CSS code written for userstyle.css will not work in userchrome.css and vice versa.