200ok-ch / organice

An implementation of Org mode without the dependency of Emacs - built for mobile and desktop browsers
https://organice.200ok.ch/
GNU Affero General Public License v3.0
2.42k stars 150 forks source link

Make font configurable #789

Open munen opened 2 years ago

munen commented 2 years ago

organice uses the font-family Courier in many places. @branch14 found out that Android does not have this font-family, so it falls back to a 'random' font (not even mono-space). To me, that's super peculiar, because Courier is supposed to be web-safe. But it is what is is. A safer approach would be to use structured fallbacks. font-family: Deja Vu Sans Mono, Courier New, Courier, monospace.

But when we make this change, we could already make it configurable which font to use for power users.

gtusr commented 2 years ago

Any progress on this front?

It's what is holding me back right now from switching over from Orgzly.

munen commented 2 years ago

Any progress on this front?

Lots of progress, indeed! @gtusr wants the feature. @munen is happy to support his PR with code reviews and testing. To get started: It’s just a simple configure flag, you can follow along the code path of “font size”.

Glhf🤞

berteh commented 1 year ago

I'll have a look at this maybe some day. in the meantime just load the following script in tampermonkey:

// ==UserScript==
// @name         Organice change font
// @namespace    https://organice.200ok.ch/
// @version      0.1
// @description  Organice change default font
// @author       berteh
// @match        https://organice.200ok.ch/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=organice.200ok.ch
// @license      https://creativecommons.org/licenses/by-nc-sa/4.0/
// @grant GM_addStyle
// ==/UserScript==

GM_addStyle ( "div.header-list-container, .App:not(.landing-page) .textarea {font-family: Verdana,sans-serif !important;" );
gtusr commented 1 year ago

Thanks. The font looks a lot better now.

I still much prefer the UI interface of Orgzly over Organice. Perhaps when I have more time to brush up on my CSS skills, I'll try to create a theme for the latter that more closely mimics the former.

berteh commented 1 year ago

@gtusr FYI I did a bit more CSS hacking to make the edit icons more compact, if it helps: https://gist.github.com/berteh/f1ae5468e683316910500ffbbe012aa1

click "raw" to install.