Hi Tiddlywikians,
Does anyone have an Idea Any ideas how to bulid a class/div that automatically scales headlines to 100% of the available width in TW?
Best wishes Jan
1 Like
Not possible with CSS until we get CSS Container Queries and/or Container Units. We have relative units but none that are relative to the container …
If you are okay with using a template + transclusion or a custom macro, then you could use SVG : Fitting Text to a Container | CSS-Tricks - CSS-Tricks
Else you will need to use javascript.
2 Likes
@JanJo , that is a good reply, I think. I stumbled on that site myself in the past and have used that SVG solution well. Mainly because SVG’s by nature, can be scaled anyway you need.
If you not so familiar with the SVG co-ordinate system it can be confusing at first. But once you “get it” it is real satisfying.
Just a footnote to @telumire’s post, TT
2 Likes
Thanks, I had to evaluate a little.
I guess fittext.js would be our candidate to incorporate into a widget.
WIth the svg-solution you always have to guess the dimensions for a viewbox which differs for each word and font, but then scales perfectly - am I right?
@JanJo the heading for each tiddler could be different of each was scaled independently given the different lengths of each title.
This was raised by me in the discussion of the multi-column layout here MultiColumn Layout — a non-linear personal web notebook and I made the following stylesheet in an experiment to improve the heading size when using multiple columns, drop this on the above demo site multi-column-customiser.json (1.3 KB) it’s an unfinished experiment.
Personally I note one can determine the windows pixel width divide it by the number of columns to determine the width of each column and use this to guide the title font size.
There is sufficient capabilities in tiddlywiki to do this customisation including using CSS calculations or using relative CSS units such as em or viewwindow vw and vh.
However as I often do, for sure, can you say;
Why do you want to scale headers to fit the space?
What is the root cause/motivation for this?, because perhaps it can be addressed in a way you/we have not yet through of?
- For example if its the toolbar interfering with the titles, simply using a hamburger menu outside the title line for button’s will leave the full tiddler width for the heading.
I want to use it in a slideshow. Have a look:
By why?, what? I can only go on what you say.
When in slideshow mode it does not seem an issue. I would be inclined to hide the tiddler title and use a title in the slide when developing a presentation.
Lets say it enlarges the font size to stretch across the screen then it will get taller as well, taking up more of the vertical space.
Perhaps an adjustable size?
Sometimes I have one word which should fill the entire screen, maybe in a strange web/google-font…
You could call it an impulse.
To make that happen a decision will need to be made “how”, size, stretch, over the buttons, up to a hamburger menu…
Perhaps you could simulate how you may like the title to be formatted for given titles using the view template and when you find what you want modify the;
Control Panel > Info > Advanced > Cascades > View Template Title process. Specifically $:/core/ui/ViewTemplate/title or a clone of it.