Joplin 1.0.127 Note Font Size

Support
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.

17

Could you post that .css file?

18

@wallyreport

I’m sorry, I don’t have it any more. At the time I was testing a few Markdown editors to see if it was worth me using an external editor with Joplin (It wasn’t).

IIRC the program was MarkdownPad and the css sheets could be copied from its settings dialog.

1 Like
19

Can I ask why you wanted it? Was it just to have a starting point for your own modifications? I ask because the css file from the Markdown editor was really awful in Joplin!

If, like me, you are not a css guru and want a stylesheet with just a few modifications and with different screen and print settings as a starting point, I would happily supply the simple one I use.

20

If you don’t mind, I would like to give it a try.

21

@wallyreport

userstyle.css

@media screen {
	body, th, td {
    	font-size: 12px;
    	color: #000000;
	}

	code {
    	font-size: 12px;
    	color: #000000;
	}

	.inline-code {
    	font-size: 12px;
    	color: #000000;
    	border: 0px none; /* remove the border from inline code*/
    	background: none; /* remove the background from inline code*/
	}

	caption {
    	display: table-caption;
    	text-align: center;
    	caption-side: bottom; /* place table caption at the bottom of the table*/
    	font-style: italic; /* make the table caption italic*/
    	color: #000000;
	}
}

@media print {
	body, th, td {
    	font-size: 12px;
    	color: #000000;
	}

	code {
    	font-size: 12px;
    	color: #000000;
    	font-weight: bold;
	}

	.inline-code {
    	font-size: 12px;
    	color: #000000;
    	border: 0px none;
    	background: none;
    	font-weight: bold;
	}

	caption {
    	display: table-caption;
    	text-align: center;
    	caption-side: bottom;
    	font-style: italic;
    	color: #000000;
	}
}

You may possibly have to enable the multimarkdown table extension to use table captions.

The values for both media screen and media print are almost the same apart from printing code text in bold. I just split them for any later changes I may make.