Custom numbered list

[Sebastjan]

Hello everyone,
My first post ever. I hope I did not break too many forum rules.

I am trying to create a custom numbered list (ordered list) with numbers in red circles.
Example:
There are seven continents on Earth:
❶ – North America
❷ – South America
❸ – Europe
...

Attached file shows more details.

Can you help me?

Thank you in advance,
Sebastjan

[SteveS]

The only control over ordered list numbering is type and value.

Because your numbers are referring to the numbers in a graphic you can create the legend in the graphic as well. That would also have the advantage of keeping the legend with the graphic irrespective of page breaks if you are creating a print version.

[Psider]

You can do some fancy stuff with counters, but it's pretty advanced and you'd most likely have to get your hands dirty in code.

I doubt it would convert to print if you need that output.

But here's a link with some examples for the enthusastic among you.

https://css-tricks.com/custom-list-number-styling/

[Sebastjan]

The only control over ordered list numbering is type and value.
Because your numbers are referring to the numbers in a graphic you can create the legend in the graphic as well. That would also have the advantage of keeping the legend with the graphic irrespective of page breaks if you are creating a print version.

For a noob like me your reply sounds like a sci-fi. Perhaps after 5 years of using Flare I will get what you wrote. For now I have just created a table, with Wingdings characters for the red circled numbers.
Thank you again for your reply.

[Sebastjan]

But here's a link with some examples for the enthusastic among you.
https://css-tricks.com/custom-list-number-styling/

It's funny, when I was checking how to do it, I came across the site you mentioned. But with no knowledge of code it was a trial and fail, with a huge emphasis on FAIL.

[Nita Beck]

Flare does support "custom lists" (although I'm not sure if you can accomplish circled numbers). Learn more here: https://help.madcapsoftware.com/flare20 ... ormats.htm

Note that these work for PDF only, per the documentation.

For one of my clients, we too have circled callout numbers on images. For the corresponding custom list to serve as the legend, I didn't even bother to try to achieve the circles (so don't know one way or another if it's possible), but I styled the numbers as bold, a bit larger than the legend descriptors, and of the same color as the circles on the images. We decided that was sufficient. Now I'll be curious to see if I can make the circles happen!

[DaveMags]

So, in case someone wants to see it in action, I had to reply because I do almost exactly this in one of my HTML5 projects.

The CSStricks link from Psider above is good for the explanation, so I'll just drop this code here for anyone thinking of trying it out. Note that for this, I use <p> tags for my "list items" in the topics, but I think I did that for a weird reason and you could do the same with regular <li> tags.

So lists in my topic look something like this in the HTML. I apply my "bluenumbercircle" class when I want to use this:

Code: Select all

<ol>
<p class="bluenumbercircle>Text here</p>
<p class="bluenumbercircle>Text here</p>
<p class="bluenumbercircle>Text here</p>
<p class="bluenumbercircle>Text here</p>
</ol>

Then this is in my CSS:

Code: Select all

ol
{
	counter-reset: forcednumbers;
}

/* This sets the correct spacing so that multiple lines indent correctly and it's properly left aligned. */
ol > p.bluenumbercircle
{
	margin-left: -14px;
	text-indent: -26px;
	margin-bottom: 5px;
}

/* Styles the numbers to a blue circle with white text */
ol > p.bluenumbercircle::before
{
	counter-increment: forcednumbers;
	content: counter(forcednumbers);
	background: #06afce;
	border-radius: 50%;
	color: #fff;
	padding-left: 5px;
	padding-right: 5px;
	margin-right: 8px;
}

And it looks like this:

blue circle numbers.png

So there you go. I use it in a few topics. But not much. It was indeed one of the trickier (and in the end, least useful really) custom CSS adds I've done. But it was a fun challenge to work out.

[Nita Beck]

Oooooh, Dave! Very, very cool. Thank you so much for the detailed solution. I'll have to go try this out.