I think the headings (h1, h2, h3, h3, h4, h5, h6) in Tiddlywiki Vanilla Theme needs some love!
The most in use theme is vanilla!
See the h4, h5, h6 are very small and h1 is huge specially if you compare it with tiddler title!
This is Tiddlywiki 5.2.0 (https://tiddlywiki.com/)
Compare with some other framework out there
I agree but @pmario has a method to rebalance the headings, change then up and down depending on the context. Perhaps even more can be done?
I totally agree. I seldom use h1 because it is so big. Also looking in other peoples TW’s, I see that headings are often changed. David Gifford is almost always doing this.
Semantically, h1 shouldn’t be used within tiddlers anyway. Best practice is that there should only be one h1 per document, used for the title. I would argue that making tiddler titles h1 could be defensible in TiddlyWiki since they are kind of “documents” themselves, but TW has chosen to make the page title h1 and tiddler titles h2, so in that sense we probably shouldn’t use anything above h3 in our tiddlers!
I start with h2 myself currently – that’s was my habit in Markdown before I used TW, so it carried over (quite apart from h1 being large and ugly).
Hi @sobjornstad - I think only h2 and h3 are usable and other headings are not! h1 is ugly and big and h5 and h6 are too small! I would like developers have a look and improve typography in Tiddlywiki!
I’d rather go with tiddler titles be H1 and remove the H1 from the document. But I think it’s there because of old conventions for screen readers.
If there is 1 default tiddler, that contains an H1, is made permanent. eg: Set the $:/config/EmptyStoryMessage to a default tiddler with H1 in it. So a screen readers always find a H1
In my case I’d also remove H2 from tiddler titles and make the part of a NAV or something like this. My tiddlers look like this:
May be we should cover the tiddler in an ARTICLE html element. Those elements haven’t been available when TW development started.
My tiddlers will have H1 to H3 I very very need H4 and if I do I know there’s something wrong in the text.
But then the wikitext syntax as it is atm is completely wrong. So a single exclamation mark should ! h3, !! h4 and !!! h5 … which imo would be perfectly fine. So for everyone that need deeper structures there is !!!! h6 left. H7 isn’t needed. Because if you need it … you need to think about your document structure anyway.
On headings, tiddlers can become external documents in which case starting at H3 could look silly.
If there were someway to use H1 H2 and H3 in tiddlers such that they in fact are translated to H2, H3 and H4 in rendering, but not in fact HTML. A system setting could support this and a simple override for printing exporting static html etc… Perhaps only for the “!”, not literal <hn>
Perhaps a “heading offset setting” of 1, 2 or 3. Defaulting to 2 ie 2 would convert H1 to H3 (in CSS)
It may be worth pointing out that TW5 does support the tv-adjust-heading-level variable for adding a user defined offset to the heading level of subsequent headings:
Thanks Jeremy, Funny we all (well I) missed that.
@Mohammad et al, to move forward here is my “research”.
The following demonstrates the issues improving the typography. One could argue tiddlywiki is a special case from which these typography issues arise. I publish this so we can investigate this further.
I have played with this with a view to addressing the Original Post.
\define tv-adjust-heading-level() 2 seems to make sense so that in tiddlers which have a title of H1, appear as H3Because I observe in tiddlywiki;
I have used this example stylesheet found here
| h1 { | font-size: 2em font-weight: bold; } |
|---|---|
| h2 { | font-size: 1.5em font-weight: bold; } |
| h3 { | font-size: 1.17em font-weight: bold; } |
| h4 { | font-size: 1em font-weight: bold; } |
| h5 { | font-size: .83em font-weight: bold; } |
| h6 { | font-size: .67em font-weight: bold; } |
| (text below) |
Using experimental tiddler we get
We then get to see that
An experimental tiddler
! H1
<h1>h1</h1>
paragraph
!! H2
<h2>h2</h2>
paragraph
!!! H3
<h3>h3</h3>
paragraph
!!!! H4
<h3>h3</h3>
paragraph
!!!!! H5
<h4>h4</h4>
paragraph
!!!!!! H6
<h6>h6</h6>
paragraph
h1 { font-size: 2em font-weight: bold; }
h2 { font-size: 1.5em font-weight: bold; }
h3 { font-size: 1.17em font-weight: bold; }
h4 { font-size: 1em font-weight: bold; }
h5 { font-size: .83em font-weight: bold; }
h6 { font-size: .67em font-weight: bold; }
The tiddler title is defined with this CSS code:
.tc-site-title, .tc-titlebar {
font-weight: normal;
font-size: 2.35em;
line-height: 1.35em;
color: #182955;
margin: 0;
So for the vanilla CSS it doesn’t matter what you used for h2 …
Mario,
Sorry I may seem smart sometimes, but I am not always, can you spell out a little more what this means;
and how one may change it (I presume in the theme eg; $:/themes/tiddlywiki/vanilla/base)
@TW_Tones , it is about how em unit works (and how CSS is applied).
If you change the font-size of the parent element the font-size of h2 changes, because em is a relative unit.
There are several ways to do it. Inside or outside theme. Using one selector or others. For example, you can change the font-size in the selector pointed by @pmario (.tc-titlebar) or you can do it in this other selector .tc-titlebar h2 (decreasing its font-size from 1 to .X(em))