Change font size in story river tiddlers dependent on whether sidebar is displayed?

#1

Hi,

I am trying to improve my ergonomics, migrating from desk to comfy chair and working further away from the screen. I would like to increase the font-size in story river tiddlers when the sidebar is not displayed after clicking on the “>>” hide side bar button so that the text is easier to read from a distance - I would aim to scale up the font-size so that approximately the same number of characters would display when the story river was displayed full width with no sidebar. To put it another way I want to signal to TW that my dismissing of the sidebar is an indication I want to sit back and just do some reading with no need for sidebar functionality and would prefer a larger font to make it easier on the eyes.

I tried CSS media inquiries with the VW sizing option for font-size but unfortunately VW works on the viewport width and so I could not get this to work according to story river width. My font-changes were only sensitive to the width of the html body element and not sensitive to the story river width.

I suspect that the fairly recent CSS containers will not be a solution for me as I am using TiddlyDesktop on Linux and I doubt that headless chrome for linux will yet feature them.

Just wondered if there were any other ways of achieving a text font-size increase to take advantage of the increase in story river width size when the side bar is hidden? Ideally I would like to scale all texts displayed in a tiddler but the main content is the primary target.

#2

This is a bit of a hack and would zoom everything, not just text, but it might be enough:

body:has(.tc-show-sidebar-btn) {zoom: 1.25}

I don’t think we can just set the font size on the body, not if you’re using one of the default themes, where many font sizes are set in pixels.

Enlarge on hidden sidebar.json (199 Bytes)

1 Like
#3

Hi,

Just an example to show you what to do …

Put the following in the “Font size for tiddler body” field (Control Panel, Appearance, Theme Tweaks, Options):

{{{ [[$:/state/sidebar]get[text]else[yes]match[no]then[24px]else[15px]] }}}

image
image1144×319 21.4 KB

3 Likes
#4

Wow, I had no idea those took filter expressions. That’s really useful!

#5

TiddlyWiki is a real champ re transclusion.

Although I’m sure there are other ways to go about that, I’m a big fan of the approach: the magic is right there, easy to find.

Well, if I wanted a user-friendly interface, I’d be doing something else.

2 Likes
#6

Thanks Scott and Charlie,

I am working with an additional CSS media screen inquiry so that I can limit the effect so that it will not activate if I am in portrait mode on my phone, the reason being that in that case the sidebar tab moves to the top of the display rather than being on the right hand side.

I tried Scott’s solution with conditional CSS media inquiry and that seems to do the trick, I am going to use it for a while and see how I get on.

I had been thinking of buying a larger monitor but simply making more use of the screen space I already have to read at a more comfortable distance makes a lot of sense.

Thanks for the responses - great stuff.

#7

This solution is simple and semantic!
Thank you!