Changing editor font size

#1

Hi,

Is it possible to change the font size of the tiddler body and also the editor but without changing the global font size in the control panel?

Regards
Jon

CSS rule for the font in the edit area?
TiddlyWiki Tiddler Editor: How to Improve the Usability?
The size of Edit vs. View Mode Fonts?
#2

You are talking about ControlPanel : Appearence : Theme Tweaks. … right?

At the moment “Font size” and “Line height” are responsible for the global font setting, which is set to body.tc-body: 14px from the control panel. This setting is responsible for the elements outside the tiddler frame.

The “Font size for tiddler body” and “Line height for tiddler body” are used only for the tiddler body “ViewTemplate”.

It seems the editor uses body.tc-body settings, which can’t be changed from the TW UI atm. … IMO this is a bug. I’ll create an issue at github. https://github.com/Jermolene/TiddlyWiki5/issues/6506

1 Like
#3

Yes, changing the ‘Font size’ in Control Panel changes the font in the editor but also everything else including the size of the tool icons

I’m using a large font for a particular set of tiddlers and I’d like them to retain the same aesthetic when opening to edit them, but keeping everything else a normal size.

Many thanks
Jon

#4

I think I was asking for different editor settings 3 years ago or more. Among other things, the editor fonts are smaller.

When I inspect the textaread, it appears that everything is hard-wired into a style attribute. So the editor, unlike the rest of the components of TW, can’t be fixed with a stylesheet adjustment.

I might add as an aside, I really like the way the Discourse editor lines up the preview text with the edit text. It would be really useful if TW could work this way. It would go a long way towards compensating for lack of WYSIWYG.

2 Likes
#5

Yea, that’s a problem, that comes with the IFrame element, we need to use for the text editor. The iframe is needed, that we can keep a “selected text” area alive, and click an editor toolbar button.

If there wouldn’t be an iframe, the text area would loose the focus and the selection, when a button is clicked. … There is an experimental PR at GH which tries to fix that, but I think it’s not 100% reliable at the moment. … :confused:

#6

Here is a dicussion at Google Groups.

Near the end, user Hubert (@hubertgk?) provides this answer, which works for me . So add this to a tiddler and tag it with $:/tags/Stylesheet

.tc-edit-texteditor-body {
    font-size: 12px;
    line-height: 30px;
}
4 Likes
#7

That’s interesting. I wonder how that works? Everything font-related in the textarea is defined in a style attribute which should supersede any CSS.

#8

There is a hidden non-iframed textarea that is created and has the same class, the styles are read from it and applied to the textarea in the iframe. This allows styling the textarea in the iframe with CSS via the hidden textarea.

image
image1042×165 13.4 KB

#9

Yes it would be nice to have way to set this, similar to $:/themes/tiddlywiki/vanilla/metrics/bodyfontsize and $:/themes/tiddlywiki/vanilla/metrics/bodylineheight .

#10

Great, I found that worked apart from the line height, which didn’t do anything in Notebook theme - but no matter.

Thanks
Jon

#11

How to change the editor font size under the notebook theme, you can copy the code below and add the same tags $:/tags/Stylesheet as above.

.CodeMirror-lines {
    cursor: text;
    min-height: 1px;
		font-size: 34px;
	line-height: 30px;
}
1 Like