Make Tiddler view and edit font sizes the same

#1

Maybe this should be in a different thread, but since the prerelease was my starting point, I’ll mention it here.

I was pleased to see that the prerelease appeared to have resolved the problem where the tiddler view font and the tiddler edit fonts were two different sizes. That is, the problem where if you increased the view font, the edit font would stay the same.

But after upgrading my working wiki, that feature disappeared and the two fonts were once again different sizes. Inspecting the v5.2.6 site, I see that the font-conformity is actually provided by the CodeMirror plugin, which happens to be installed (not sure why). The CodeMirror plugin seems to be very “busy”, wrapping every single line of text.

So I’m wondering if it’s possible to make the core automatically provide consistent edit and viewing fonts?

1 Like
Now is the time to help with testing the TiddlyWiki v5.2.6 prerelease
Now is the time to help with testing the TiddlyWiki v5.2.6 prerelease
#2

You can set the font-family at ControlPanel → Appearance → Theme Tweaks. … So you can define how they look like in view and edit-mode. … There is only 1 size setting though.

#3

But that doesn’t work. If, without the CodeMirror plugin, you change the Tiddler display font, it will not also change the edit tiddler font.

Having the view and edit fonts be two different sizes poses visual and cognitive challenges. Considering that most wikis these days offer a WYSIWYG experience, at least not having the font change 3 sizes when you edit is a starting point.

#4

Let’s say I make these settings in a Empty 5.2.6 prerelease:

image

Then my tiddler text looks like:

image

But my edit tiddler text looks like:

image

The Font size changes didn’t carry over to the Edit box.

#5

If you change tiddler-body font size you also need to change the overall font size. By default Font size and Line height are -1px different to tiddler sizes.

image
image1634×595 45.1 KB

Which looks like this. For me that would work just fine. BUT I don’t change any of those settings. I use browser zoom instead. … I use this function that often, that I don’t even recognize it anymore. … The browsers remember the setting for the page.

image
image1924×993 82.4 KB

#6

None of this makes any sense. The editor and view font should work in lock-step – they are just the view and edit form of the same thing. The editor should not be tied to the overall font size.

Browser zoom works on desktops sometimes, but on devices the text expands across the boundaries of the screen edge. If we don’t have WYSIWYG, we should at least have the edit/view fonts rationally associated.

2 Likes
#7

No … Different font-families have different visual heights.

  • Edit mode usually uses a fixed font
  • View mode uses a proportional font
  • So those 2 values have to be adjustable separately
#8

For me it works always. I’m using FF on windows, Ubuntu and on my Android phone.

Lately I started to use Edge a bit more to see if the chat AI does make sense. (… not really)

#9

No, the edit family doesn’t make 7 pixel size difference.

I repeat the experiment, setting the edit font to be the same font as the display font:

image

To make it crystal clear that this isn’t a font-family problem, I will boost the display tiddler size even more:

image

Then the tiddler displays as:

image
image716×56 2 KB

But the edit font is still the same, painfully small size:

image

#10

Here’s what happens to your text if I zoom on Firefox on Android:

image
image800×224 14.8 KB

The font doesn’t increase (like it does on desktop). Instead the graphic display spills off the edge of the screen.

But even if it did work, why should I have to zoom in and out when using edit mode? The edit mode and the display mode should be approximately the same size.

#11

So, @Mark_S, basically what you’re saying is that you’d like the font size in the regular editor not to be based on
$:/themes/tiddlywiki/vanilla/metrics/fontsize (“Font Size” in the ControlPanel)
but rather on
$:/themes/tiddlywiki/vanilla/metrics/bodyfontsize (“Font size for tiddler body”)
right?

I think that’s a sensible proposition, since the former is a setting for the UI as a whole, and the editor and viewer font sizes should at least be similar, irrespective of the small visual differences between fonts at the nominally same size.

PS: “vanilla” may need to be replaced by the current theme name.

PPS: We might want to move this discussion to its own thread, as this doesn’t seem to be related to 5.2.6.

#12

Well, somebody had claimed that this problem was fixed in an earlier version of TW. So if its a lapsed fix, then this would be the time to re-apply the fix.

1 Like
#13

That’s because you’ll need to change the “Font size” and “Line height” too. That’s the way it is implemented atm and it has to be done that way. Works fine for me.

show screenshot with grid overlay

image
image1920×1167 306 KB

#14

As I’ve shown in 2 different screenshot sets, I have changed font size and line height.

All your screenshot shows is that everything is ok at the default settings (14/22). But as soon as you move away from that setting, the edit font remains at 14/22 while the view font changes. The size of the edit and the view fonts should remain approximately the same (within constraints of different font families). Or there should be a way to specify the edit font separately.

#15

image
image1401×247 7.49 KB

#16

But … why ? Why do I need to change the sidebar and every other font in the system when all I want is for the edit and view tiddler fonts to work in lock step – just like any newcomer would expect? On a small screeen, the sidebar would immediately become unusable.

#17

You expect it that way. … It has been implemented as is 9 years ago … We did not have any feedback like yours that there should be only 1 setting.

I did search for font size in GH issues.

I did raise an issue, that there probably is a bug, which may result in more fine grained settings if fixed.

You can raise an issue at GitHub. It would be a new feature. IMO we should discuss this there.

#18

Hello @Mark_S, maybe you could do with a manual CSS fix?
If you create a new tiddler tagged $:/tags/Stylesheet with the following:

.tc-edit-texteditor-body {
    font-size: {{$:/themes/tiddlywiki/vanilla/metrics/bodyfontsize}};
    line-height: {{$:/themes/tiddlywiki/vanilla/metrics/bodylineheight}};
}

this should get you what you need for now.

PS: Don’t set the tiddler type to text/css, or the transclusions will not work.