Custom CSS doesn't apply to rendered HTML, only rendered Markdown

devonzuegel · 2020-01-27T01:08:39.117Z

Even though I actually worked on the custom CSS feature, I’m bashful to say that I can’t quite figure out why the userstyle.css file is only being applied on the rendered Markdown notes and not on the rendered HTML ones. I tried following the logic yesterday but got fairly stuck, since there’s lots of layers of indirection.

laurent · 2020-01-29T11:28:45.986Z

For HTML notes, I didn’t add support for userstyle because getting the CSS right with random HTML is not possible. For example, a page might have various elements with various background colours and hard-coded font colours, so if you change with custom CSS it might make some text unreadable or elements invisible. Also for example a white PNG icon on a black background - you might be able to change the background colour but not the icon colour.

I can’t really think of a way to properly support userstyle for this, but if you have any suggestion, please let me know.

Likewise I’ve hesitated before enabling themes for HTML notes, but maybe it should actually be disabled because it doesn’t work well for certain HTML notes.

devonzuegel · 2020-02-23T01:59:18.034Z

The context that makes me interested in this question is that I use Hypothesis to highlight webpages. When I clip pages to Joplin with the full-page HTML clipper, it does properly clip the HTML tags that Hypothesis added. However, it doesn’t clip the CSS that Hypothesis injects into the page, so those divs show up without any styling on the page (i.e. blank), so you don’t see there’s a highlight there.

I’d like to be able to add a class in my custom CSS like .annotator-hl so that it gives the highlights a different background. These have a predictable classname on every page, since they come from the Hypothesis extension, so I think it gets around the problem you’re describing.

laurent · 2020-03-02T18:50:14.247Z

devonzuegel:

The context that makes me interested in this question is that I use Hypothesis to highlight webpages. When I clip pages to Joplin with the full-page HTML clipper, it does properly clip the HTML tags that Hypothesis added. However, it doesn’t clip the CSS that Hypothesis injects into the page, so those divs show up without any styling on the page (i.e. blank), so you don’t see there’s a highlight there.

The clipper doesn't copy the CSS but I'd expect it also doesn't clip the HTML added by Hypothesis, would it? If I remember well, each extension has its own copy of the page to deal with, but cannot see what other extensions are doing (including DOM modifications), so in that case even with custom CSS that wouldn't work as the HTML wouldn't be there to style, unless I'm missing something.

I still don't know how to best solve this issue. I expect some users have complex custom CSS with dark background and elements, and if we enable this on HTML notes it will break the display. So there would have to be a way to toggle the custom CSS on and off, which is not a very elegant solution.

tessus · 2020-03-02T21:57:09.313Z

laurent:

The clipper doesn’t copy the CSS

Hmmm, I clipped a web page and in the clipped page there's css that isn't in the original page. So the clipper either followed the css links and imported them or I don't know what's going on.

devonzuegel · 2020-03-04T05:36:03.978Z

laurent:

The clipper doesn’t copy the CSS but I’d expect it also doesn’t clip the HTML added by Hypothesis, would it?

I just highlighted and clipped example.com. In my browser it looks like this:

image2556×750 71.2 KB

And the clipping looks like this:

image2370×1134 378 KB

It appears that it is clipping the injected HTML and CSS now, whereas before I thought it was just clipping the HTML. Not sure what changed! But it's doing what I wanted now without any apparent adjustment needed, so that's good.

tessus · 2020-03-04T06:43:27.345Z

Unfortunately relative urls in the css file are a problem. Something like ../fonts/forkawesome-webfont.woff2?v=1.1.0 leads to net::ERR_FILE_NOT_FOUND.

t0dd · 2024-01-25T23:24:08.358Z

I want to see two things:

HTML notes wrapped in an unstyled <div id="rendered-html" /> You know. In the same place in the view as the <div id="rendered-md" /> for markdown notes.
the equivalent of userstyles.css but for HTML. Because, of course, some of us want to style that rendering a bit differently than the default.