Guide to font-size in TiddlyWiki?

311 views
Skip to first unread message

David Gifford

unread,
Jun 12, 2021, 6:16:22 PM6/12/21
to TiddlyWiki

I am having a rough time of it in TiddlyWiki today.

I just want the font-size of the following to all be the same:

1. Regular text in a tiddler.
2. Text in transclusions
3. Text in the sidebar lists.
4. Text in tables.

5-8 below tend to be smaller than 1-4 above.

5. Text in ordered and unordered lists.
6. Text in custom ViewTemplate tiddlers.
7. Text with <strong> tags around it
8. Text in a <div> or <span>

I have removed "font-size" from the Stylesheet tiddlers I thought relevant, as well as from Theme Tweaks in the control panel. But none of that seems to improve things.


Anyone know of a guide to font-size CC for TiddlyWiki? Or can see what I am doing wrong?

Darth Mole

unread,
Jun 12, 2021, 7:36:47 PM6/12/21
to TiddlyWiki
Hello,

Just to confirm you want all the text related to items 1 through 8 to be the same size?

Darth Mole

unread,
Jun 12, 2021, 7:46:42 PM6/12/21
to TiddlyWiki
If yes try adding the following css to your css tiddler.

body, p, ol, il, strong {

font-size: fontsize !important;
}

Replace the word fontsize with one of the values from the property values section of the below page:


IE: small, medium, or x-large

Brian Radspinner

unread,
Jun 12, 2021, 8:18:58 PM6/12/21
to TiddlyWiki
Try these:

html body.tc-body { font-size: 16px; }
body p { font-size: 1em; }
.tc-tiddler-frame { font-size: 1em; }
.tc-sidebar-scrollable { font-size: 1em; }

For a page baseline size and some relative sizes.

David Gifford

unread,
Jun 12, 2021, 8:45:15 PM6/12/21
to TiddlyWiki
Thanks iamdar... and Brian! Brian's snippet did the trick, and I am learning from iamgar's advice too!

Darth Mole

unread,
Jun 12, 2021, 11:56:57 PM6/12/21
to TiddlyWiki
Glad the information was of some use :) Congrats and good luck!

PMario

unread,
Jun 13, 2021, 1:59:29 AM6/13/21
to TiddlyWiki
On Sunday, June 13, 2021 at 1:46:42 AM UTC+2 iamdar...@gmail.com wrote:
If yes try adding the following css to your css tiddler.

body, p, ol, il, strong {

font-size: fontsize !important;
}

!important is the absolute last resort. It brutally forces styles. In the long run it will cause more troubles as it solves. See https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#the_!important_exception

So it needs to be used with care!

-m

PMario

unread,
Jun 13, 2021, 2:15:06 AM6/13/21
to TiddlyWiki
There is a good post with much better reasoning. https://uxengineer.com/css-specificity-avoid-important-css/

-m
Reply all
Reply to author
Forward
0 new messages