A CSS to embellish *MultiMarkdown* rendering

Hi all !

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 :

  1. good legibility, according to classical typographic rules ;
  2. visual clarity of the document’s structure ;
  3. compact enough layout so as to display a maximum amount of text on a MacBook 13" monitor ;
  4. 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 !

OpSpl style sheet.zip (19.2 KB)

9 Likes

Maybe I should have included some screen captures. Here they are.

5 Likes

Thanks for sharing. :slight_smile:

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. :slight_smile:

This is really helpful — thank you!

@OlivierPS - I really like this style sheet!!

Very nice CSS – I adopted it immediately.