9 ms·

Prettifying Org Mode with CSS

179 points by thecsw 6y ago

amiga_500 6y ago
Prettifying org mode export
psibi 6y ago
> 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 6y ago
  I think the author refers to the fashion house Maison Dior: https://en.wikipedia.org/wiki/Dior https://en.wikipedia.org/wiki/Dior
- thecsw 6y ago
  Author here! That was me messing around late at night I like to keep my environment very strict and even adding my own dependency was a stretch. I just found a style that works for me and wanted to share it so maybe other people will make their own too! Just applying simple tech for everyday use
- pwrdbytmr 6y ago
  beautiful. thanks for sharing
jmarcher 6y ago
I like the ReadTheDocs one https://github.com/fniessen/org-html-themes#readtheorg https://github.com/fniessen/org-html-themes#readtheorg
oefrha 6y ago
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
- cosmicexplorer 6y ago
  The sandyuraz.com dependency might be a good starting point for people who don't know how to make CSS styles, though, or want an example to go off of!
- cosmicexplorer 6y ago
  Also, I added back/forward support to org-info-js (along with a GPL license) here: https://github.com/cosmicexplorer/org-info-js https://github.com/cosmicexplorer/org-info-js. I haven't used it in a bit, but feel free to take the code e.g. from https://github.com/cosmicexplorer/org-info-js/commit/d72b310f04a1be01f365a696a5b78edf1e990480 https://github.com/cosmicexplorer/org-info-js/commit/d72b310... if you're looking to improve the default org-info-js situation.
  - oefrha 6y ago
    Back/forward with b/B is built in, but I guess additional integration with history doesn’t hurt.
- switz 6y ago
  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 6y ago
    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 6y ago
      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 6y ago
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
- tuukkah 6y ago
  I was investigating the same last night. There's a reply in the issues though: "There are still people there but not very active on this project currently. But we try to keep it alive !" https://github.com/vscode-org-mode/vscode-org-mode/issues/162 https://github.com/vscode-org-mode/vscode-org-mode/issues/16...
- dmortin 6y ago
  You can use Emacs just for org mode even if you use vscode for coding.
  - nxpnsv 6y ago
    And once there, you can also code in emacs too. Imho.
- m463 6y ago
  I wonder if the people who develop it for vscode... do they gradually start using emacs more and more and give up vscode? :)
- slightwinder 6y ago
  Might be because org-mode outside of emacs has little worth, while markdown is more dominating. On emacs you have gazillion tools and apps enriching the org-sphere, which for vs code you would need to replicate all by yourself. And the format itself is just not good enough to survive on it's own IMHO.
  - bachmeier 6y ago
aidenn0 6y ago
FWIW, Nikola, and probably other static-site generators support Org mode as well.
- sulami 6y ago
  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 6y ago
    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 6y ago
      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
chrismorgan 6y ago
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 6y ago
  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__ 6y ago
    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 6y ago
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?
- jameslk 6y ago
  I would assume it has something to do with information hierarchy. The more important elements are bigger, bolder, darker. If everything is this way there's less means to draw attention to important information. EDIT: I can't tell actually if there's differences in color between the headings and body text in this case. If not... shrug
- Kyro38 6y ago
  About grey on white, it is said to decrease eye strain. [1] [1] : https://uxmovement.com/content/why-you-should-never-use-pure-black-for-text-or-backgrounds/ https://uxmovement.com/content/why-you-should-never-use-pure...
  - throwaway_pdp09 6y ago
    The responses at the bottom of that article are very interesting, and not necessarily all supportive. But thanks.
    - jraph 6y ago
      If everybody settle on pure white on pure black or the reverse, I can choose the best contrast of my display for myself. Sites that use gray are annoying, and what's worse every sites doing that use a different gray. And if I use an OLED screen in a completely dark setting, your "not really black" is annoying too: there is more light coming to my eyes, and your website will be harder to read because of the lower contrast. Way more strain on my eyes, clearly. You work against me. Don't choose for me, you don't know my setting and how my eyes work. Fortunately, Dark Reader and Dark Background and Light text both do a good job of setting the right colors to webpages and are customizable. An extension working the same way to undo these arbitrary choices and to set the desired level of gray for a light background and a dark text would be nice. Setting the level of gray should not be the designer's choice, because each user is different in this respect. If someone is annoyed by a too big contrast, their screen is probably too bright and they can set it. If you as a designer try to solve this problem for me as a visitor, you are preventing me from solving this problem in the best possible way, once and for all, for every sites I visit. Please don't mess up with my contrast. I know some people don't know how to configure their display or even that this is a problem and bad display settings are what cause them headaches, but you won't this fix for them, and even may make the problem worse for some of them. Smaller contrasts are not compliant to the Web accessibility guidelines for a reason. Good thing that I have screens with sharp contrasts and good eyes though. Am I missing something?
enriquto 6y ago
The "before" looks so much better! I really dislike the second layout.
- eyelidlessness 6y ago
  Then don't use this :)
alessivs 6y ago
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
jaseemabid 6y ago
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
deadcoder0904 6y ago
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; }
ableal 6y ago
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 6y ago
  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 6y ago
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 6y ago
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/

179 points by thecsw 6y ago

Prettifying org mode export

> 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 6y ago
I think the author refers to the fashion house Maison Dior: https://en.wikipedia.org/wiki/Dior https://en.wikipedia.org/wiki/Dior
thecsw 6y ago
Author here! That was me messing around late at night I like to keep my environment very strict and even adding my own dependency was a stretch. I just found a style that works for me and wanted to share it so maybe other people will make their own too! Just applying simple tech for everyday use
pwrdbytmr 6y ago
beautiful. thanks for sharing

jmarcher 6y ago

I like the ReadTheDocs one https://github.com/fniessen/org-html-themes#readtheorg https://github.com/fniessen/org-html-themes#readtheorg

oefrha 6y ago

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

cosmicexplorer 6y ago
The sandyuraz.com dependency might be a good starting point for people who don't know how to make CSS styles, though, or want an example to go off of!
cosmicexplorer 6y ago
Also, I added back/forward support to org-info-js (along with a GPL license) here: https://github.com/cosmicexplorer/org-info-js https://github.com/cosmicexplorer/org-info-js. I haven't used it in a bit, but feel free to take the code e.g. from https://github.com/cosmicexplorer/org-info-js/commit/d72b310f04a1be01f365a696a5b78edf1e990480 https://github.com/cosmicexplorer/org-info-js/commit/d72b310... if you're looking to improve the default org-info-js situation.
- oefrha 6y ago
  Back/forward with b/B is built in, but I guess additional integration with history doesn’t hurt.
switz 6y ago
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 6y ago
  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 6y ago
    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 6y ago

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

tuukkah 6y ago
I was investigating the same last night. There's a reply in the issues though: "There are still people there but not very active on this project currently. But we try to keep it alive !" https://github.com/vscode-org-mode/vscode-org-mode/issues/162 https://github.com/vscode-org-mode/vscode-org-mode/issues/16...
dmortin 6y ago
You can use Emacs just for org mode even if you use vscode for coding.
- nxpnsv 6y ago
  And once there, you can also code in emacs too. Imho.
m463 6y ago
I wonder if the people who develop it for vscode... do they gradually start using emacs more and more and give up vscode? :)
slightwinder 6y ago
Might be because org-mode outside of emacs has little worth, while markdown is more dominating. On emacs you have gazillion tools and apps enriching the org-sphere, which for vs code you would need to replicate all by yourself. And the format itself is just not good enough to survive on it's own IMHO.
- bachmeier 6y ago

aidenn0 6y ago

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

sulami 6y ago
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 6y ago
  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 6y ago
    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

chrismorgan 6y ago

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 6y ago
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__ 6y ago
  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 6y ago

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?

jameslk 6y ago
I would assume it has something to do with information hierarchy. The more important elements are bigger, bolder, darker. If everything is this way there's less means to draw attention to important information. EDIT: I can't tell actually if there's differences in color between the headings and body text in this case. If not... shrug
Kyro38 6y ago
About grey on white, it is said to decrease eye strain. [1] [1] : https://uxmovement.com/content/why-you-should-never-use-pure-black-for-text-or-backgrounds/ https://uxmovement.com/content/why-you-should-never-use-pure...
- throwaway_pdp09 6y ago
  The responses at the bottom of that article are very interesting, and not necessarily all supportive. But thanks.
  - jraph 6y ago
    If everybody settle on pure white on pure black or the reverse, I can choose the best contrast of my display for myself. Sites that use gray are annoying, and what's worse every sites doing that use a different gray. And if I use an OLED screen in a completely dark setting, your "not really black" is annoying too: there is more light coming to my eyes, and your website will be harder to read because of the lower contrast. Way more strain on my eyes, clearly. You work against me. Don't choose for me, you don't know my setting and how my eyes work. Fortunately, Dark Reader and Dark Background and Light text both do a good job of setting the right colors to webpages and are customizable. An extension working the same way to undo these arbitrary choices and to set the desired level of gray for a light background and a dark text would be nice. Setting the level of gray should not be the designer's choice, because each user is different in this respect. If someone is annoyed by a too big contrast, their screen is probably too bright and they can set it. If you as a designer try to solve this problem for me as a visitor, you are preventing me from solving this problem in the best possible way, once and for all, for every sites I visit. Please don't mess up with my contrast. I know some people don't know how to configure their display or even that this is a problem and bad display settings are what cause them headaches, but you won't this fix for them, and even may make the problem worse for some of them. Smaller contrasts are not compliant to the Web accessibility guidelines for a reason. Good thing that I have screens with sharp contrasts and good eyes though. Am I missing something?

enriquto 6y ago

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

eyelidlessness 6y ago
Then don't use this :)

alessivs 6y ago

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

jaseemabid 6y ago

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

deadcoder0904 6y ago

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; }

ableal 6y ago

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 6y ago
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 6y ago

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 6y ago

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/