
Prettifying Org Mode with CSS - thecsw
https://sandyuraz.com/articles/orgmode-css/
======
alessivs
With some configuration it is possible to _work_ with these styles while
editing in Org mode, including the use of variable-width fonts, inline images
and formulas, etc. The configuration[1] describes an exemplary process.

It is also possible to tweak the Org mode export mechanism to modify its
structural markup to fit projects such as Tufte CSS[2][3].

What the article doesn't explicitly mention is that #+HTML_HEAD: is an
instance of In-buffer setting[4]. These can be either added to individual
files, or more conveniently, to a reusable _Setup file_ many files could point
to (specified by the #+SETUPFILE: in-buffer setting).

1\. [https://lepisma.xyz/2017/10/28/ricing-org-
mode/](https://lepisma.xyz/2017/10/28/ricing-org-mode/)

2\. [https://github.com/dakrone/ox-tufte](https://github.com/dakrone/ox-tufte)

3\. [https://jnboehm.gitlab.io/blog/tufte-
css/](https://jnboehm.gitlab.io/blog/tufte-css/)

4\. [https://orgmode.org/manual/In_002dbuffer-
Settings.html](https://orgmode.org/manual/In_002dbuffer-Settings.html)

------
chrismorgan
Looking at the screenshots and the CSS in question, and presuming that before
it just wasn’t specifying fonts at all, I prefer the “before” result if I’m
the consumer, mostly because I like the fonts I set in my browser, and
consider Inter and Incosolata a slight regression. Also most of the other
styles I disagree with; capping the width and reducing the line-height for
headings is about all I actually agree with in there.

But really I think that if this is all you want to change with org-mode HTML
output, it must export pretty decent HTML. (I’m not familiar with it.)

(Analysis of the things I particularly don’t like: 1.6 is too large a line-
height; I prefer #000 to #444, though I’d settle for #222; image should use
max-width instead of width, and have height: auto added, and what’s with the
700px instead of 900px, especially if you’re not going to block and centre
it?; border-radius on images seems a bad idea; I dislike gratuitous fiddling
with ::selection colours—only touch it if you have actual brand colours that
you’re making it align with, like [https://wesbos.com/](https://wesbos.com/),
and be cautious even in that, as is demonstrated in the .highlight on that
page which thwarts selection styling.)

~~~
jeromenerf
Org mode html export is clean by default, yet customizable.

I like that the outline is represented in the dom as nested elements instead
of a flat representation. Title, status, tags, properties, description, code
and code output are well separated and easy to select through path, I’d and/or
class.

Something I enjoy is the "narrow to sub tree" feature that allows to export a
nice html rendered export from a part of the document.

~~~
erk__
I have been using that feature to keep all my uni assignments in the same
file. Although I export to LaTeX and not html. Though I can export it as a
single large webpage with all the assignments on, and it mostly work.

------
throwaway_pdp09
I mostly prefer the layout of the after, for its added vertical spacing. The
one thing I really don't like, and don't understd either, is that they've made
the font grey instead of black.

Grey on white has less contrast than black on white which reduces readability
- I doubt it can ever _increase_ readability. It's basic human physiology -
probably basic physics.

So an open question to all those who describe themselves as UI/UX experts -
why do you do this?

~~~
Kyro38
About grey on white, it is said to decrease eye strain. [1]

[1] : [https://uxmovement.com/content/why-you-should-never-use-
pure...](https://uxmovement.com/content/why-you-should-never-use-pure-black-
for-text-or-backgrounds/)

~~~
spion
In my experience, this is completely wrong. I always strain _more_ to read
gray text on white background, no exception. I really wish this trend stops.

A darker background, on the other hand, can be helpful in some situations.

~~~
eyelidlessness
> In my experience, this is completely wrong. I always strain more to read
> gray text on white background, no exception.

I can't know for sure, but it's pretty likely your experience and your
observations aren't quite aligned. If the contrast is too low (such that you
notice), it can certainly cause more strain. But it's often the case that
almost-black registers as black (and almost-white as white) and you don't even
realize that's what you're seeing.

~~~
spion
That's the entire problem with this theory. The designer does NOT know what my
computer screen renders. Not every computer is a Mac with a 400+ nits display
or has the same contrast ratio. The optimal "gray" therefore varies across
screens.

In my case, anything above #333 is capable of producing problems, the range
#333 to approx. #444 is problematic with thinner font weights and anything
above #444 is easily, noticeably terrible with anything except heading
weights.

------
deadcoder0904
This is the CSS included for the lazy:

    
    
        /* Originally from http://bettermotherfuckingwebsite.com */
        @import url('https://fonts.googleapis.com/css?family=Inconsolata|Inter&display=swap');
        body {
         margin: 40px auto;
         max-width: 900px;
         line-height: 1.6;
         font-size: 16px;
         color: #444;
         padding: 0 10px;
         font-family: 'Inter', sans-serif;;
        }
        h1,
        h2,
        h3 {
         line-height: 1.2;
         font-family: 'Inter', sans-serif;;
        }
        img {
         width: 750px;
         border-radius: 10px;
        }
        pre {
         font-family: 'Inconsolata', monospace;
        }
        ::selection {
         color: white;
         background: #ff4081;
        }

------
oefrha
Org mode by default just uses your user agent stylesheet. Adding some CSS is
trivial, so just write your own damn styles instead of adding a sandyuraz.com
dependency for no reason.

Adding interactivity on the other hand is more involved. I recommend org-info-
js which is what I use with my journals.
[https://orgmode.org/manual/JavaScript-
support.html](https://orgmode.org/manual/JavaScript-support.html)

~~~
switz
You seem offended someone provided some styles that help along with an easy
way to integrate them.

One could easily copy those styles, extend them or host it themselves. Why the
vitriol?

~~~
oefrha
I would be supportive if the advice is “copy those styles, extend them or host
it themselves”, not adding a dependency that’s bound to be broken sooner or
later. There are way too many bloated, slow, or broken websites due to linking
to random blurbs from the internet.

~~~
iakh
Not sure if this was added later, but it says exactly that...

 _or just use the bare CSS as a starting point to make your own (everyone has
their own style)_

------
taneem
I was looking for an Org-Mode type solution for vscode, and was surprised to
find that it's basically no longer being actively developed! [1]

Really surprised by this. I would have thought there would be at least a small
and thriving community of people that want to use org-mode, but with vscode.
What gives?

[1] [https://github.com/vscode-org-mode/vscode-org-
mode](https://github.com/vscode-org-mode/vscode-org-mode)

~~~
dmortin
You can use Emacs just for org mode even if you use vscode for coding.

~~~
nxpnsv
And once there, you can also code in emacs too. Imho.

------
psibi
> That’s why I prefer Dior

What does Dior mean ?

I usually use bootstrap css when I have to publish:
[https://github.com/marsmining/ox-twbs](https://github.com/marsmining/ox-twbs)

~~~
Renaud
I think the author refers to the fashion house Maison Dior:
[https://en.wikipedia.org/wiki/Dior](https://en.wikipedia.org/wiki/Dior)

------
jmarcher
I like the ReadTheDocs one [https://github.com/fniessen/org-html-
themes#readtheorg](https://github.com/fniessen/org-html-themes#readtheorg)

------
amiga_500
Prettifying org mode _export_

------
ableal
Two notes:

\- [https://orgmode.org/](https://orgmode.org/) \- Org mode is for keeping
notes, maintaining TODO lists, planning projects, and authoring documents with
a fast and effective plain-text system.

\- The main style element here is the max-width setting. The original bare
HTML of the 1990s was mostly read in 640 by 480 pixel 14 or 15" CRT screens,
with the most fortunate using workstations with megapixel 19" screens.
Document width at maximum window size was fine then.

~~~
fiddlerwoaroof
Hmm, I don’t think I ever used a resolution lower than 800x600 in the 90s, and
mostly used 1024x768. (Although I only really started being aware of these
things in ‘96 or so)

------
BumpAccount
It does make me wonder if the web would have been better off if we had stuck
in the direction of personalised styling and simply vended html and nothing
else.

------
funkaster
Interesting, but i’ve found the html output of orgmode to be maybe too
opinionated. For a project that i’ve been trying to launch for a few months
now (can’t find the time and with covid-19 and no schools for kids is even
worse), I wrote my own org parser and html exporter in clojure. The result is
a semantic html output that looks gorgeous with mvp css[0]. I’m planning on
releasing this as OSS but need to find time to fix a minor bug in the link
parser.

¯\\_(ツ)_/¯

[0]: [https://andybrewer.github.io/mvp/](https://andybrewer.github.io/mvp/)

------
jaseemabid
There is a solarized version as well which I've used a few times in the past.
[https://thomasf.github.io/solarized-css](https://thomasf.github.io/solarized-
css)

------
enriquto
The "before" looks so much better! I really dislike the second layout.

~~~
eyelidlessness
Then don't use this :)

------
aidenn0
FWIW, Nikola, and probably other static-site generators support Org mode as
well.

~~~
sulami
I’m successfully building sulami.github.io from org-mode using Hakyll, though
my setup is quite complex due to my requirements (e.g. PDF output).

~~~
interactivecode
I've been trying to do PDF output, from a webpage, basically the saving the
output of CMD-P and save as PDF.

Do you have a good method for this?

~~~
sulami
I wouldn't call it good, but I'm using Pandoc to generate LaTeX. The whole
thing is wrapped in Hakyll, which already uses Pandoc to generate the HTML
from the source (org/markdown).

Feel free to dig through the source if you want to see how it works:
[https://github.com/sulami/sulami.github.io](https://github.com/sulami/sulami.github.io)

