Custom CSS for RSS, dark mode and printing

DEVONthink
1

I got a custom CSS from this forum (sorry, now I cannot find it anymore), did tiny modifications in body section (mostly adjust font and alignment), and it can be seen very well in RSS:

Captura de pantalla 2020-09-03 a las 10.42.07
Captura de pantalla 2020-09-03 a las 10.42.071816Ă—1588 1.03 MB

However, when I try to print to PDF or convert into PDF, I get this result:

Captura de pantalla 2020-09-03 a las 10.42.22
Captura de pantalla 2020-09-03 a las 10.42.221048Ă—1032 193 KB

Printing with Default.css is done right. Added to this, my customized CSS, when dark mode, shows text in black and background in black. However, Default.css shows right inverted colors.

My question is: where is located default.css to pick it, modify and put modified version in custom CSS folder? I looked inside DT3 bundle but didn’t found it.

2

It’s in the DEVONwebkit.framework inside the bundle. But please don’t modify the application bundle, this will break the code signature.

3

Great! Found it, copied into my home Library/Application Support/DEVONthink 3/StyleSheets.

However, even Default.css has this issue (exaggerated here to make line_height to 100):

Captura de pantalla 2020-09-03 a las 16.48.12
Captura de pantalla 2020-09-03 a las 16.48.121700Ă—736 304 KB

An option is print a one-page PDF, but perhaps there exists a solution to avoid this in paginated mode.

4

You could use a media query in your CSS and then define styles that are used in print only.
PDFs are by default paginated, and since you print to sheets of paper… But you could use CSS attributes in your stylesheet to set conditions for the page breaks.

In any case, layout in PDF has to obey more restrictions than on screen. E.g. you can not simply widen your sheet of paper as you can a browser window. So no fluid layout on paper, or at least only very limited.

5

I’m trying to do it but no luck. I tried this:

image
image830Ă—222 21.1 KB

And the result is exactly the same: lines and images cut in middle.

6

According to MDN, overflow-block is hardly supported and paged is not listed there as a keyword. So you might want to try without this. Also the “orphans: 3;” doesn’t make much sense here, I think. orphans gives the minimum number of lines at the bottom of a page. img and svg do not have lines, I think. And I’m not sure how that works with table either. But I may be wrong here, of course.

It might be helpful to know more about the structure of the original document. Could you provide a link? I wasn’t able to find anything by googl’ing for the top line.

7

It is a variation of the original DT Default.css. I’m attaching my last version, updated with other variations got from StackOverflow (sorry, I’m not an HTML/CSS guy).rfog_default.css.zip (1.6 KB)

8

I just saw the original URL after I posted (I didn’t mean the CSS but the RSS ;-).

If I clip this link as Markdown to DT, it seems to print ok. I.e. there are no page breaks in the middle of the images. Would that be an option for you?

On the other side, the CSS you linked to (rfog_default) contains the line

* {display: inline}

in the @media printsection. This looks weird to me, since it would treat all elements like lines of text. Even images, tables etc. that are usually considered blocks.

9

I use a little bit more complex scenario. I use combination of DEVONsave (from MacStories) + HTML to PDF from DEVONsave posted here, get a HTML file that is converted into PDF. That works fine without line breaks and only some reasonable image cuts if the image is too big to fit in a page.

However, I would like to print to pdf from DT itself directly from DT RSS…

Well, it is more than anything an excercise.

10

That is a thing taken from StackOverflow, copying like a monkey because I don’t understand half of the things. My original try was this:

@media print {
* {
page-break-inside: avoid;
}
}

11

Now you have me utterly confused. The code you mentioned above is not in the CSS you linked to. Neither is the one you just posted. What is the current version that you use?

What happens if you use

@media print {
img {
page-break-inside: avoid;
}
}
12

What is the feed URL you are using here?

13

Ha, ha. I’m trying a lot of combinations. None work. The one I posted last was my last test. The CSS file is the same, the one I’ve attached, and I change the “@media print {}”, test it and search for a new variation.

Your variation does nothing with the images: they are cutted in middle of page break.

14

This one:

Edit: currently that one, but happens with most of my rss.

15

Hmm… That’s not a valid RSS feed URL.

16

Just to find out if this CSS is used at all in printing, could you maybe try out something like

@media print {
  * { background-color: #DDD !important;
     font-family: serif !important;
     }
}

This should set the background to all elements to a light grey and the font to one with serifs (like Times). If nothing changes than this (part of the) style sheet is apparently ignored.

1 Like
17

Seems it is ignored, as nothing is changing… And the CSS file is being used because if I change alignment (for example) in normal css section, both printing and showing the feed changes accordingly after change (and going back and forth from other css to my css).

18

F*ck, I’ve discovered that not only need to change active CSS, but restart entire DT!!!

Now I get a gray background with your last change. I’m going to experiment with other options now I know I need to restart DT.

19

No, is this one:

https://www.caninomag.es/feed

But I’ve found I need to restart DT to load changes…

1 Like
20

All!

Works!!!

(See attachment).

Feeds — “Los prodigiosos cuentos de Chesterton”.pdf (534.2 KB)

With this variation:

@media print {
		img, br, body { page-break-inside: avoid;}
}

Problem was not restarting DT.

1 Like