Many people have read, studied and enjoyed Kourosh Dini’s Taking Smart Notes with DEVONthink. He mentioned and distributed a “pre-release” CSS (Cascading Style Sheet) that I was refining for my personal use. With Kourosh’s stimulation and the knowledge that it might be appreciated by some people, I went on with the development of this style sheet.
Please, do take into account that I’m not a graphic designer nor a programmer. I copied a Brett Terpstra stylesheet that he designed for his Marked software and modified it. In the process, I learnt just the minimum of CSS useful to achieve my goals. So, it may not be up to “professional standard”. But as any perfectionist should know : “Very often, functional is good enough.” So, it just works.
I wanted to achieve :
good legibility, according to classical typographic rules ;
visual clarity of the document’s structure ;
compact enough layout so as to display a maximum amount of text on a MacBook 13" monitor ;
overall elegance.
So, in the end, the main points of this CSS are :
The overall look is meant to give a feeling of “pen on paper”.
Blue ink text colour, very discreet.
Paper background, very discreet too.
Readable line length, around three alphabets — the classical rule says “around two and a half alphabet, not more than three and a half ”.
The text column stays centred in the window. When the window is narrow, it stays clear of the border, whatever the zoom level.
Links and footnote markers are discreet, but conspicuous. They are highlighted when hovered by the pointer.
Headers level 1 and 2 get a typographic rule, so they stand out.
It’s generally advised to use H1 as the document title and nowhere else in the document. Thus, it has a very minimal space above it in order to spare space at the top of the document.
Header 3 is meant as a subtitle. It’s clearly distinct from body text, but spares vertical space. Useful to introduce parts of a note.
Lists — both bulleted and numbered — are rather compact, but nevertheless visually breathing and logically grouped, even many levels deep.
Elegant, decorative ornament for HR (horizontal rule).
Tables :
centred horizontally ;
text in heading row aligns to the bottom of the cells ;
text in the rows aligns to the top of the cells ;
alternating row pattern ;
title is distinctive, but not overwhelming (smaller than H#) ;
NB : it’s a bug of the DEVONthink’s rendering engine that puts the table title always below the table, regardless of what is specified in the CSS. Personally, I would rather have the title above the table.
Images :
framed with a thin line ;
limited to column width ;
when in “portrait mode” (i.e. taller than wide), they are vertically limited in order to preserve the proportions with the text and not fill the screen !
left aligned ;
the caption is visually grouped with the image.
Citations are in a lighter blue, serif font, in italics → intended mainly for quoting thoughts.
The graphic elements (paper background + swirl ornament) are included in the CSS, no download nor installation necessary.
Finally, I made intensive use of variables that you can find grouped at the top of the file. Thus, it’s easier for you to tweak settings to your taste ! (Edit with any “pure text” editor. The one you’re using for Markdown will be just fine.)
Attached is a Zip file with the package :
OpSpl.css — the style sheet
CSS OpSpl readme.md — not only a read me ; it’s also a (minimalist) “beginner’s guide” to help anyone customizing a CSS.
Markdown test document.md — a sample file for testing (use it anywhere !) and to illustrate some fine points. There are also some usage tips.
This stylesheet is not meant only for DEVONthink, it’s also very pleasant as a Marked alternative style.
Enjoy !
Kind regards.
Olivier Spinnler
Post Scriptum : if a talented graphic designer or a programmer feels like perfecting this modest attempt of mine into a more “professional” piece of work — maybe whith hints for different media — he/she is most welcome !
Post Scriptum : if a talented graphic designer or a programmer feels like perfecting this modest attempt of mine into a more “professional” piece of work — maybe whith hints for different media — he/she is most welcome !
Aesthetics are largely a matter of personal taste. If you appreciate it, then it requires no outside modifications.
The size of the heading depends on the heading level. You are using heading level 1 (the “#” before “Lessons”). If you reduce that to header level 2 ("##") or 3 ("###") then the font size will decrease.
You could also change the CSS itself, but that is more complicated to explain at the beginner level.
Thank you, I realize that to some extent the font size is determined by the heading level. But here, the body text is also too large. It doesn’t look like the same size that the author of the CSS sheet posted.
I use that same CSS style sheet in DT3 and it’s excellent.
You should be able to use the Zoom In / Zoom Out commands to change the size (cmd -/+, cmd-0 to reset) of the text (it’s the same as for a web page, which is basically what is being shown).
As far as I can tell, once you’ve changed one document to a comfortable size, then the next one will also be shown at that zoom level. At least, that’s what happens when I tested it a few times here.
If you want to change the default font size in the CSS itself, then AFAIK the only way is to amend the CSS file.
DISCLAIMER: I am not an expert in CSS - I just play around till something works. Backup up the CSS file before you do anything…
The lines you want are here:
:root{
--font-size-normal: 17px;
--line-height: 1.4rem; /* line spacing, relative to the font size */
--max-width: 50rem; /* line length, relative to the font size */
So, you would change from 17px to 15px to reduce the standard font size by two pixels. Most other sizes are keyed into that, so H1 is twice the height of the normal font, for example.
However, there may be examples where the font size is hard coded in, and those you’ll have to change manually.
The best thing to do is to take a copy of the working file and then experiment on the copy.
While that is of course true, it is semantically questionable. The first level heading in a text should be H1, not something else. I know, that sounds pedantic.
Since the OP is not happy with the representation of H1, they should adjust the CSS to use a smaller value for font-size.
Although it is done all over the Web: Do not use pixels as dimensions for font size. We are living in a world with Retina displays, small and large displays … It is far better to use something like em or rem, i.e. relative dimensions. Which, by the way, the next two lines in the quoted CSS do.
Good point. One can actually add the styles at the top of this file itself (before any MD content!) like so
<style>
body: { font-size: 1.2em}
</style>
Should be easier than switching two and fro between two files just for experimentation.
Brookter: That’s the ticket! I did as you suggested and zoomed out the text and it applies now to any markdown files I open. I even closed the program and restarted and the same zoom level still shows.
Point taken, but the hard coding (of the basic font size only, as you see in the quote) is in the original CSS I think, so I was just explaining how to change it there.
Personally, I don’t post html on the net, and I know that EB Garamond 17 works very well on both laptop and iMac, because that’s what I use in every editor: it makes sense to set the basic font size to that, while using relative sizes for everything else.
Would someone know, if it is possible to align source and rendered text so that they move simultaneously in the editor? My favorite LaTeX editor TeXpad does this very nicely.
)