search

cqroot / joplin-outline

A markdown outline (TOC) sidebar plugin for Joplin.
MIT License
218 stars 17 forks source link

Theme font isn't displaying correctly #19

Closed jt196 closed 2 years ago

jt196 commented 3 years ago

App version: 1.7.3 Plugin version: 1.0.10

If I set the font family to default or leave it as var(--joplin-font-family), the Outline text displays as a serif font. If I change it to helvetica, the font will change correctly.

It'd be great to have this working as per the default font for the theme.

cqroot commented 3 years ago

It is not yet known how to obtain a suitable default font. The var(--joplin-font-family) variable works well most of the time. If you find a better variable or css value, please provide it to me. thank you for your suggestion.

jt196 commented 3 years ago

Sorry dude my CSS is a bit lacking! I'm guessing the 'Roboto' theme font (Dracula theme) I currently have is a Google web font. Helvetica works I'd assume as it's one of the html web safe fonts.

brttbndr commented 3 years ago

I think I've addressed this in https://github.com/cqroot/joplin-outline/pull/28

I have the Dracula theme set and noticed Roboto wasn't picked up in the outline via the var but if I put literally "Roboto" in the preferences it worked. Experimenting w/live editing in the dev tools I determined that the double-quotes around the var(...) prevented it from being interpolated to its value (i.e. Roboto).

jt196 commented 3 years ago

OK - just checked this, possibly hasn't been pushed to the the Joplin repo yet, but this is still not working in my version. Joplin 1.7.11, Outline v1.1.6. All without quotes:

cqroot commented 3 years ago

The latest version is 1.1.7. It seems that the official repo did not get this update.

jt196 commented 3 years ago

OK no probs, when it updates, I'll report back and confirm it's working or not and close if the former. Cheers!

jt196 commented 3 years ago

@cqroot as per the comment above still in v 1.1.7. Only 'Avenir' is changing the font to a sans serif.

brttbndr commented 3 years ago

@jt196 Do you have the Roboto font installed / available? If it doesn't work when you explicitly specify it (i.e. in the same way as 'Avenir') then it won't work when inherited, either.

Here is the presentation I get with "SomeOtherFont" (that is, any value that I don't have installed). It's a default serif font.

image

image

Here it is with "Roboto" specified in settings. I have this font installed.

image

And here it is with the default "var(--joplin-font-family)" setting. In order to get this appearance, I had to both install the Roboto font AND change the plugin to remove the quotes.

image

jt196 commented 3 years ago

Aaaah, missing the font installation. It's working now.

I'm guessing plugins don't have access to the Joplin fonts then? Kind of a weird set up!

brttbndr commented 3 years ago

Yeah, it's weird, but there's a reason.

Plugins are deliberately restricted to their own sandbox (directory).

https://github.com/laurent22/joplin/blob/5b65186b4d9d7c06f2748cd5ce3e39c1a81b26db/packages/lib/services/plugins/WebviewController.ts#L94

The Roboto font is packaged as a CSS file into the Electron app. Since we're prevented by the code above from making a relative reference like this:

<link rel="stylesheet" href="../../node_modules/roboto-fontface/css/roboto/roboto-fontface.css">

It's right there ... but we can't use it. 🤷🏽‍♂️

Perhaps there's a feature request there, for Joplin to expose bundled resources into the plugin sandbox. It doesn't make sense to me for each plugin to ship w/redundant fonts, etc.

jt196 commented 3 years ago

It doesn't make sense to me for each plugin to ship w/redundant fonts, etc.

Or have the users install fonts on their system to match the packaged Joplin fonts...

Thanks for the explanation though. Makes sense to expose a small amount of the Joplin visual styling to the plugins for design consistency's sake. No idea how hard it would be to implement though!