How to?: Make the markers of numbered list bold

[Surya]

Hello,

I want to make the markers (the shown numbers) of a numbered list bold.

I mean, if I write:

# one word

# another word

it should be not shown like:

1. one word

2. another word

but it should be shown like:

1. one word

2. another word

I already tried by css and looking into the "examine element", but couldn't find out anything... And the google search gave me no helpful answer.

How can I achieve this?

Surya

Update:

The solution is:

Write in a stylesheet

li::marker {
font-weight: bold;
}

Update of the update:

The solution above does not work on Android.

I found out another solution, which works also on Android.

Writing in the stylesheet

padding-left: 10px;

then there is a space between markers and the list items. With that it is much better readable on Android now (though the bold solutions would be much nicer & better, but in this way now it is okay too).

[Mark S.]

As a beginning, you could try making a stylesheet tiddler like this:

li::marker {
font-weight: bold;
}

[Surya]

Hi Mark,

that's it :-) Now the lists (partially with numbers at the beginning) is much better readable!

The missing thing was the "li"...

Thanks! Surya

[Surya]

Unfortunately that doesn't work on my android tablet :-(  (and that was the most important, on the laptop it wasn't so important).

It doesn't matter which app I use for that wiki on my tablet.

The list markers show just normal numbers, not bold. Also tried with color, background-color and font-size.

Is there any way, that this style is also working on android??

[Mat]

Surya wrote:

Unfortunately that doesn't work on my android tablet

How did you add the proposed css? did you modify a core stylesheet or did you add it as a separate stylesheet? If you modified a core ss then maybe you put the css inside a section that is limited to big screens. The section likely starts with something prefixed with an @ sign, e.g @screensize or similar. 

If you did put it in a separate ss, then you must ensure that it is called after the other ones. You can do this by clicking the $:/tags/Stylesheet tag and drag the name of your stylesheet to the bottom of the listed ones.

<:-)

[Surya]

Hi Mat,

I wrote it in two separate stylesheets. I have two of them- one for the laptop and one for the tablet.

And depending where I use the wiki, I switch between the stylesheets.

For testing the list style I dragged the stylesheet for the tablet on the bottom of all stylesheets, activated the stylesheet for the tablet and saved.

Then I opened the wiki on my tablet-

but still the list markers are not bold...

[@TiddlyTweeter]

It is an elegant solution ... BUT its currently only, I think, supported in recent Firefox & Safari browsers on desktop.

That may be the issue you are encountering on Android??

 

The solution is:

Write in a stylesheet

li::marker {
font-weight: bold;
}

Support notes:  https://caniuse.com/#feat=css-marker-pseudo

TT

[@TiddlyTweeter]

I updated my last post to make clearer it looks like there is NO Android browser that supports this method ... 

[Surya]

Yeah :-)))

I found out another solution, which works also on Android.

Writing in the stylesheet

padding-left: 10px;

then there is a space between markers and the list items. With that it is much better readable on Android now (though the bold solutions would be much nicer & better, but in this way now it is okay too).

Surya

[@TiddlyTweeter]

Here is a different method using CSS counters. I haven't exhaustively tested it but seems to work across browsers ...

ol {counter-reset: item;}
ol li {display: block;}
ol li:before {content: counter(item) ". "; counter-increment: item; font-weight: bold;}

Notice under counter(item) ". " yyou can add literal stops and spacing if you need.

TT

[Surya]

Hi TT,

yes, that works, also on Android the list-numbers are bold.

But it has some consequences, which I do not want:

In every tc-table-of-contents there are then list-numbers. And in the tiddlers with lists, the text is not anymore indented, only the first line.

Because of these, that isn't my solution, sorry.

[@TiddlyTweeter]

Right.

One would have to use a specific class for it only for the specific lists you need styling.

I think they can be invoked through WikiText though I've never done it for lists. 

TT

[Surya]

No problem, it is not great but really okay like it is now (with my solution above).