Codimd: Font size in editor

Created on 29 Mar 2017  路  7Comments  路  Source: hackmdio/codimd

Hi,
Perhaps it would be helpful to have a font size selector in the editor. I personally find the editor font way too large on a low res display. Is there any easy way to reduce the font size in the config currently?

enhancement minor

Most helpful comment

(won't take it personally, no problem)

I understand your point, but it has to be noted that there are already quite some features at the bottom editing bar, which aren't disturbing to the user (i.e. me in my self-experiment). The +/- buttons are included even in very simple text editors and belong to the fundamental features of those.

An user setting would not be the cleaner solution to this, as this prevents guests from using the feature. Maybe there are some other opinions about this, but as I'm not a maintainer of this project, and it seems like this is a design decision, I will not insist on this.

All 7 comments

Hi @olesk75
No, there isn't any way to change the editor font size.
Maybe we could make this available as a preference.

Thanks for suggestion.

Well, there is a way to change to font size in the editor. But it will also change the font size of the preview, so I don't know if @olesk75 is happy with that.

HackMD works beautifully regardless of browser-zoom-level. In case you did not use it before: it works in pretty much every single browser, try hitting Ctrl++ / Ctrl+- (reset to default size with Ctrl+0). This can also be controlled with your mouse wheel or touchpad: Ctrl+(use your mousewheel or do a scrolling gesture).

I personally don't think that the editor needs an option for that. I'm using browser zoom all the time, depending on which machine I'm using or if i'm in a situation with many people in front of one screen.

It's not really a biggie, I've just noticed that the editor font tends to get big relative to the display font on lower resolution displays. Browser zoom works, but I'd prefer to have the editor pane (and font) much smaller than the display. And I generally think it's a nice feature to be able to have a user adjustable font size preference, ideally without having to manually zoom the entire browser/app window. But again, I don't think I'll try to argue for making this a high priority - just a nice-to-have :)

I'm interested in this feature, too. The browser zoom is not very convenient, as it also changes the display size. Especially in side-by-side mode this does not really solve the initial problem of the editor font being a bit too large (IMHO) compared to the display font. This feature could be implemented either as a slider, or more simple, as a pair of +/- buttons.

(please don't take this personally)

I am VERY strongly against putting yet another piece of user interface clutter somewhere. No, not even "just two buttons". They don't belong there. If at all, this might be a user setting, but as of now we don't yet have such a thing.

(won't take it personally, no problem)

I understand your point, but it has to be noted that there are already quite some features at the bottom editing bar, which aren't disturbing to the user (i.e. me in my self-experiment). The +/- buttons are included even in very simple text editors and belong to the fundamental features of those.

An user setting would not be the cleaner solution to this, as this prevents guests from using the feature. Maybe there are some other opinions about this, but as I'm not a maintainer of this project, and it seems like this is a design decision, I will not insist on this.

Hello and many thanks for this nice tool.

Just to mention it, I think it is possible to change (the Editor's font size by acting server side.
This possibility is not manageable by the user, but may help in some cases.

To that aim, change a font-size CSS property in the file
build/index.css,
more precisely in the CodeMirror class' CSS:

.CodeMirror {
    font-family: "Source Code Pro", Consolas, monaco, monospace;
    letter-spacing: 0.025em;
    line-height: 1.25;
    font-size: 18px;       /* HERE */
    height: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
}

Then reload the page client size of course.

But perhaps there is another, better way, to configure the editor's font server side ?

Was this page helpful?
0 / 5 - 0 ratings

Related issues

yaxu picture yaxu  路  4Comments

ghost picture ghost  路  4Comments

SISheogorath picture SISheogorath  路  4Comments

dsprenkels picture dsprenkels  路  3Comments

mxmilkiib picture mxmilkiib  路  3Comments