Home / GitHub Page

Joplin 1.0.127 Note Font Size

#1

With the release of 1.0.27 the default font size in the body of the rendered notes appears to have increased and is no longer similar to the font size of the note card as it was in previous versions.

By setting the global zoom percentage to 80% the text in the rendered note goes back to what it used to look like. However the note card, tag names, notebook names etc. then have a much smaller font which is harder to read.

This happens on both the Windows version and the Linux appimage.

Is this increase in the default font size for the rendered note intentional?

#2

The increased font size was intentional, as part of a larger update to the default styling of notes. Fortunately that styling is customizable with css. If you create a userstyle.css file in ~/.config/joplin-desktop/ you can simply change the font size with a few lines of css. see here for more information about userstyle.css
The below lines should return your font size back to what it was before.

body {
    font-size: 12px;
}
1 Like
#4

@CalebJohn

Thanks for the info. I had tried playing with the userstyle.css file.

In order to try to revert all rendered notes elements back to a size more proportionate with the “card” and interface text (at least as far as I am concerned!) I used:

body, th, td {
    font-size: 12px;
}

“Fenced” code also looks fine using this but in-line code is now tiny. Using code as a tag seems to affect “fenced” code but not “in-line” code.

Any pointers please?

#5

laurent told me yesterday here that userstyle is no longer used.

#6

It’s working for me. I even tried taking a Github css file which came with a Markdown editor, called it usersyle.css and put it in the joplin-desktop directory. It worked. Looked horrible. But it worked.

Could it be that the post you referred to means that userstyle.css is no longer being used for printing as opposed to the display?

#7

The inline code html tag is

<code class="inline-code">

Internally it’s styled by class, so that must take precedence. You can try this in your userstyle.css

body, th, td, .inline-code {
    font-size: 12px;
}

I tested on my computer and this does change the inline-code font size.

1 Like
#8

@CalebJohn

That’s it!!! Joplin is now back to how I happen to like it.

Thank-you so much for your help. You are a star!

#9

You’re welcome, enjoy!

#10

That’s only the case for printing…

#11

Is this documented and if so, were?

#12

https://github.com/laurent22/joplin/blob/master/ReactNativeClient/lib/MdToHtml.js :wink:

#13

Ah! So there is a ‘convert to HTML’ facility. Can you please add this as an export option?

1 Like
#14

As others have suggested you could use pandoc until the feature is added to joplin.

1 Like
#15

To convert a note to html, yes.
However, I would like to know the elements/classes that Joplin uses internally so I can use style sheets to shape the Joplin appearance as well as the printed output.

#16

Oh! If that’s all you need it for you should check out the MdToHtml.js file, it contains all the CSS (and most of the html) for note rendering.
If you still can’t find what you need there feel free to ask specific questions and I (or someone) can try to help.