How to set font size for editor?

[Mark S.]

When we talk about accessibility, the first thing that comes to my mind is font size.

You can change the font size of displayed tiddlers. You can change the overall font size of everything else.

But is there a way to just change the editor font? Changing the overall font means that the title and sidebar look wrong.

For that matter, I'm surprised that the editor and display fonts aren't the same -- it's usually the same person using them both!

Thanks!

[TonyM]

Mark,

I got the impression that a variation in font is helpful to differentiate the display and the edit. I also believe this can be set somewhere, but it also differs if you are using codemirror. I will let you know If I find it.

Tony

[Hubert]

Hi Mark,

I'm using these CSS selectors to tweak font parameters affecting only the editor:

.tc-tiddler-frame textarea.tc-edit-texteditor {
    font-size: whatever-you-set;

}

Best,

Hubert

[Jeremy Ruston]

Hi Mark

On 5 Oct 2019, at 17:25, 'Mark S.' via TiddlyWiki <tiddl...@googlegroups.com> wrote:

When we talk about accessibility, the first thing that comes to my mind is font size.

You can change the font size of displayed tiddlers. You can change the overall font size of everything else.

But is there a way to just change the editor font? Changing the overall font means that the title and sidebar look wrong.

There’s indeed no UI in “theme tweaks” for setting the body editor size. Hubert’s CSS works but is brittle. I’ve pushed a mod for v5.1.22 here to add a new class "tc-edit-texteditor-body” to the body editor:

https://github.com/Jermolene/TiddlyWiki5/commit/89716bb81d68b9c68d3c0fd2f2de96afad1b086a

That makes it possible to change the editor fonts with something as simple as :

.tc-edit-texteditor-body {

font-size: 30px;

font-family: serif;

}

For that matter, I'm surprised that the editor and display fonts aren't the same -- it's usually the same person using them both!

The ability to change the editor font was introduced by Mario a couple of years ago:

https://github.com/Jermolene/TiddlyWiki5/pull/2867

I think the rationale is that a monospaced editor font can make it easier to work with wikitext markup.

Best wishes

Jeremy.

Thanks!

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/13fb3572-4259-46c3-9cc7-6ed85b636177%40googlegroups.com.

[@TiddlyTweeter]

Jeremy Ruston wrote: 

... monospaced editor font can make it easier to work with wikitext markup.

At least that. That change was helpful!

Its much better as soon as you need a nice editing experience.

Laying out tables for instance. Or screenplays.

Adding font size option would be good!

TT

[Mark S.]

For that matter, I'm surprised that the editor and display fonts aren't the same -- it's usually the same person using them both!

The ability to change the editor font was introduced by Mario a couple of years ago:

https://github.com/Jermolene/TiddlyWiki5/pull/2867

I think the rationale is that a monospaced editor font can make it easier to work with wikitext markup.

What I meant to write was that I was surprised that the size of the two font sets wasn't the same. It certainly

makes sense to use a different font family for the tasks.

Thanks!

[PMario]

Hi,

Got to the ControlPanel: Appearence: ThemeTweaks: Sizes section.

There are 4 values:

 - Font size
 - Line height
 - Font size for tiddler body

 - Line height for tiddler body

that play together. If you change "Font size", you'll probably also have to adjust "Line height". Same with tiddler body settings.

-m

[Mark S.]

The problem, as I mentioned, is that if you change font size it also changes sidebars, titles, etc. -- stuff that

has nothing to do with the editor.

Thanks!

[PMario]

On Monday, October 7, 2019 at 4:14:34 PM UTC+2, Mark S. wrote:

...

What I meant to write was that I was surprised that the size of the two font sets wasn't the same. It certainly

makes sense to use a different font family for the tasks.

If you go to the ControlPanel: Appearence: ThemeTweaks: Settings   section, you can

 - copy the content from Code font family into Editor font family  

eg: "SFMono-Regular",Consolas,"Liberation Mono",Menlo,Courier,monospace

This should work well. ... You are right, the different font-families have different heights, even if the pixel setting is the same.

-m

[PMario]

On Saturday, October 5, 2019 at 6:25:41 PM UTC+2, Mark S. wrote:

...

For that matter, I'm surprised that the editor and display fonts aren't the same -- it's usually the same person using them both!

We could add a different font-size for the editor, ... But is it really worth it?

Are you "just curious" or is there a real problem?

-m

[Mark S.]

I'm startled that you think an accessibility issue is just "curious".

I can only assume you have much better vision than I do.

[PMario]

On Monday, October 7, 2019 at 4:59:26 PM UTC+2, Mark S. wrote:

I'm startled that you think an accessibility issue is just "curious".

I can only assume you have much better vision than I do.

From your fist post:

>But is there a way to just change the editor font?

At the moment ... no, but we could add one, which makes configuration and the default CSS settings, for the base theme, more complex.

>Changing the overall font means that the title and sidebar look wrong.

From my point of view, this is a convenience setting. ... which depends on the actual values you intend to use.

Can you give an example which settings you would prefer?

Font size
Line height

Font size for tiddler body

Line height for tiddler body

So we have a chance to reproduce it.

-mario

[Mark S.]

Jeremy said there was going to be a new class, .tc-edit-texteditor-body.

That seems like a good fix.

The ideal ideal setting would be

editor font size

editor lineheight

but if not, then making the editor font size and lineheight the same as the tiddler font size and lineheight would make the most sense.

I've never noticed anyone getting challenged whether they're "just curious" when they ask for help. Maybe I should start asking that.

[PMario]

On Monday, October 7, 2019 at 5:26:30 PM UTC+2, Mark S. wrote:

Jeremy said there was going to be a new class, .tc-edit-texteditor-body.

That seems like a good fix.

As I wrote, that's a possibility.

 

The ideal ideal setting would be

editor font size

editor lineheight

I wanted to know, which values you'd like to use, so that we can test it. ... I did some tests, changing the default values from eg: 14px to 15px or 16px. Line height from 22 to eg 24 and so on.

But those tests are worthless, if your values are significantly different.

I personally do use the browser zoom quite a bit. For example.

 - The GG I'm viewing and editing with 150% atm.

 - tiddlywiki.com most of the time I use 130% ...

That works very well for with my monitor resolution. I don't have the desire to change the TW setting, because it is much more work, than the browser zoom.

 

but if not, then making the editor font size and lineheight the same as the tiddler font size and lineheight would make the most sense.

It should be separated values, since editor and view font-families can have very different properties.

 

I've never noticed anyone getting challenged whether they're "just curious" when they ask for help. Maybe I should start asking that.

I didn't want to be rude. If it felt that way, I want to apologise.

-mario

[TonyM]

Folks - re vision

I have no complex vision issues (maybe that's not true), so I am sure I don't know the potential issues for various different vision "configurations" but the liberal use of ctrl-mouse roller for zoom in and out helps me a lot. It makes me wonder why someone would talk about font size.

Since getting Intraocular lenses (due to cataracts).  which reduced my short sightedness a lot, and catching a detached retina in time, the best thing I did was get a pair of glasses (multi-focal)  specifically designed for close (keyboard) and near (monitors .8 to 1.2m distant) this has made my "computer" vision excellent.

Interestingly the surgery for the detached retina reduced the floaters in my right eye.

I can now do without glasses because I have whats call mono-vision, Left eye reading, right eye distance (You get used to it) but near range glasses make this more comfortable in front of a three screen computer (where I spend too much time).

I admit I am fortunate to have a public health system backed up by private health coverage, but perhaps this information could be helpful to some.

Regards

Tony

[Mark S.]

I'm finding that 24px with 30px lineheight is good. A practical range for fonts is between 14 and 40 px.

The thing about zooming, is that on a tablet the browser doesn't acknowledge the edge. So now you have to pan the text back and forth to read/edit. Or you have to type blind.

The obvious fix is to change the font between platforms. So I came up with a quick way to do that. BUT, it doesn't work for editing because the edit font is separate from the body font.

Thanks!

[TonyM]

Mark,

I see now.

Perhaps some kind of action to dynamically change the right hand side edge is needed for tablets. I believe there has being people discussing this in the past. The Startup actions would not be good enough. Perhaps some flexBox or other responsive method needs to be put into the page template?

Static or specific font sizes are not the best in a multi-screen world.

Regards

Tony

[Hubert]

Hi Mark,

The obvious fix is to change the font between platforms. So I came up with a quick way to do that. BUT, it doesn't work for editing because the edit font is separate from the body font.

I'm unsure if you've read my original response. The below CSS works (although, as Jeremy said, it is brittle). I use it in my own wiki with no issues for the same reasons as you do. It works and only affects the text editor in tiddler edit mode, so unless I'm missing something I believe that this is what you're been trying to do.

Just paste this as your CSS until Jeremy introduced the new class:

.tc-tiddler-frame textarea.tc-edit-texteditor {
    font-size: 24px;
    line-height: 30px;
}

Once the class tc-edit-texteditor-body has been introduced in a new TW update, simply replace the above CSS with the one below (in fact, it's only the CSS selectors that will need to be replaced):

.tc-edit-texteditor-body {
    font-size: 24px;
    line-height: 30px;
}

Static or specific font sizes are not the best in a multi-screen world.

I agree Tony, but this can be fixed by using the relative em values instead of pixels. In addition to that, the CSS selectors can be embedded in @media queries so that any static/predefined values are only applied based on, say, screen size (i.e. the device being used), which makes it "responsive".

I frequently use the sidebar breaking point as the reference point to dynamically adjust what stuff looks like on mobile (you can set a literal value or transclude one specified in a theme that you have installed):

@media (max-width: {{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}}) {
    .tc-edit-texteditor-body {
        font-size: 24px;
        line-height: 30px;
    }
}

Regards,

Hubert

[Mark S.]

Hi Hubert,

Somehow I missed that.

That looks good! I wrote a stylesheet swapper for it over in the thread with Dave Gifford.

Since I'm changing the editor fonts, I might as well change the view body at the same time.

You don't happento know which CSS selectors I can use for the view body, do you?

Thanks!

[Hubert]

Hi Mark,

This might work but I haven't tested it, so there might be collateral damage:

.tc-tiddler-frame .tc-tiddler-body {
    something: something;
}

If you're willing to experiment, I've found this GitHub post by Jeremy with lots of different CSS selectors that make up the vanilla theme, if I'm not mistaken. Some of these might be of use.

-Hubert