Bullet Characters

[Cal Wilson]

I am working on a multilevel bulleted list.

In the CSS, I see the list-style-types disc, square, and circle.

Example:
list-style-type: square;

The behavior of these characters is unique to say the least. The disc and circle are too small for my design.

Can someone tell me what other characters can be used or how to EASILY change the size of the characters?

Is it possible to use an en dash also?

I have seen a number of posts about using pictures, ascii characters, etc.

Unfortunately, using pictures is NOT an option.

I have tried ascii characters with no success. I suspect that I don't have the correct ascii characters, or I am not setting them up correctly in the stylesheet.

If ascii characters will work, can someone point me to a source for acceptable characters and explain how to insert same effectively?

Here's hoping someone can help.

[kwag_myers]

To use an en dash instead of a bullet, set the list-style-type to none and enter the en dash (and a space) as the mc-auto-number-format property.

[Cal Wilson]

@kwag_myers

Thanks for taking time to reply.

I am wondering if your approach might answer my questions. Before I start testing, could you review the following and let me know what you think?

I am working on a multilevel list. I am not using auto-number-formatting.

The list style code that I have and want to tweak is below. I am looking for the values (like square, circle, and disk) that will work for each level in the multilevel list.

Will an en dash set up in mc-auto-number-format property affect what is used in the code below? If mc-auto-number-format modifications would work, is it possible to apply the symbol to specific levels in the multilevel list?

The look I am hoping for is shown in the attached picture.

Thanks again for your help.

ol
{
/* ol: numbered lists */
list-style-type: decimal;
margin-left: 0px;
margin-right: 0px;
padding-left: 30px;
margin-top: 0px;
margin-bottom: 0px;
margin: 0px;
}

ul
{
/* ul: bullet lists */
list-style-type: square;
margin-left: 0px;
margin-right: 0px;
padding-left: 24px;
margin-top: 0px;
margin-bottom: 0px;
margin: 0px;
}

ol ol,
ul ol
{
/* second level numbered lists */
list-style-type: square;
margin-left: 0px;
padding-left: 16px;
}

ol ol ol,
ul ol ol,
ul ul ol,
ol ul ol
{
/* third level numbered lists */
list-style-type: disc;
padding-left: 16px;
}

ul ul,
ol ul
{
/* second level bullet lists */
list-style-type: disc;
margin-left: 0px;
padding-left: 16px;
}

ul ul ul,
ol ul ul,
ol ol ul,
ul ol ul
{
/* third level bullet lists */
list-style-type: circle;
padding-left: 16px;

[kwag_myers]

What you have listed are the styles for the entire list. You want to add an li style for the en dash:

Code: Select all

li
{
	list-style-type: disc;
}

li.enDash
{
	mc-auto-number-format: '- ';
	list-style-type: none;
}

Referring to your image, use li for the first and third list items and li.enDash for the second.

Also, if you nest each list inside the parent list, you don't need all those list styles (unless you want to adjust the margins):

Code: Select all

<ul>
    <li>a;lsdjfjf;alskdjfjfl;sldjdfj
        <ul>
            <li class="enDash">a;lsddf;lasjposvawofl
                <ul>    
                    <li>alskdfasofj0ff;sknf</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

edit: I realize now that it may be necessary for Word output to have several list styles as Word automatically switches things.

[Cal Wilson]

@kwag_myers

Thanks for the suggestion.

Unfortunately, I am a WYSIWYG writer. I don't understand writing CSS code, so working in the code is not productive; it's a struggle.

I will just use the symbols I have. I was hoping to only have to change the symbol name, for example, disc to en dash. But alas simple changes are once again complex.

The list style I have now is easy to apply. Also, it's easy to promote and demote the multilevel lines. I am concerned that introducing another list style will break that functionality and may disrupt the paragraph spacing that I have.

Thanks again for your help.

[kwag_myers]

...I was hoping to only have to change the symbol name, for example, disc to en dash..

This is essentially what I'm proposing. Instead of selecting circle or disk, select none. Then scroll down to mc-auto-number-format and click on the blank Properties field. A dialog displays where you can type in the en dash (or hyphen) and a space. That's it.

If you're not familiar with typing unicodes, here's the process:

1. Press and hold down the Alt key.
2. Press the + (plus) key on the numeric keypad.
3. Type the hexidecimal unicode value using the numeric keypad. For en dash, it's 0150.
4. Release the Alt key.

[NorthEast]

Firstly, your original approach is correct; don't use a li class to set the format - it's unnecessary, and means you'd have to manually apply a li class, whereas the original method is automatic.

Anyway, the secret to using a special character for a bullet list is to use the ::marker element.

For example, using a dash for a bullet list (ul) looks like:

Code: Select all

ul>li::marker
{
	content: '—';
}

So if you want a dash for a second level bullet list item, the full CSS would look something like this:

Code: Select all

ul
{
/* bullet list level 1 */
	list-style-type: square;
}

ul ul>li::marker,
ol ul>li::marker
/* bullet list level 2 */
{
	content: '—';
}

ul ul ul,
ol ul ul,
ol ol ul,
ul ol ul
/* bullet list level 3 */
{
	list-style-type: circle;
}

ol
{
/* numbered list level 1 */
	list-style-type: decimal;
}

ol ol,
ul ol
{
/* numbered list level 2 */
	list-style-type: lower-alpha;
}

ol ol ol,
ul ol ol,
ul ul ol,
ol ul ol
{
/* numbered list level 3 */
	list-style-type: lower-roman;
}

If you need help understanding the CSS here, see my post on setting up lists: http://forums.madcapsoftware.com/viewto ... =12&t=4983
(This was written prior to CSS3 ::marker support)

----

Note that Flare v10 supports creating your own custom list formats; use Format > List > Custom format (I use the old toolbar, not sure where this is on ribbon).

However, there's a couple of issues with this:
- it will force you to create a list class; so if you want this for normal lists (without a class), you would need to create the list format, then manually edit the CSS in text mode to remove the class name.
- you can't edit the list format via Flare; so if you need to change it, you'll probably have to edit the CSS in text mode, or delete the code and start again.

[dorcutt]

Wow, thanks Dave, that's really awesome. I'll be adding that to my project today for third level items.

What is browser support for this like? Does it work in the "real world" for webhelp, or what happens when it fails?

[NorthEast]

Wow, thanks Dave, that's really awesome. I'll be adding that to my project today for third level items.

What is browser support for this like? Does it work in the "real world" for webhelp, or what happens when it fails?

Good spot, the browser support isn't good (yet), but PDF is ok; from MadCap's help:

Warning: At this time, custom list formats are supported only in PDF, XHTML, and XPS outputs. After browsers begin to support the CSS3 marker element that makes custom list formats possible, this feature will automatically be supported in browser-based outputs as well. Until then, if you want to generate a browser-based output, you should use the standard method for creating lists instead.

I'd suggest setting the list-style-type as a fall-back.

[Cal Wilson]

@Dave Lee

First, thanks for taking time to help. Some of your other posts have been a great help in developing the list formatting that I now have.

I am so close to the actual format that I want yet so FAR away.

The format I trying for is shown in the attached picture.

It is worth noting that I know virtually nothing about CSS. What I have learned has been truly by trial and error and copying code from posts like the one you recommended earlier.

I have tried the li::marker approach with no luck.

I found that the en dash wasn’t correctly displayed in compiled help (CHM and HTML5).

Is this due to the fact that custom list formats are not supported as you noted, or did I do something wrong?

Can I use your li:marker approach to accomplish the format? Will the format be displayed properly in the output? If so, could you help me? Could you modify the code below and post it back?

I know this is a lot to ask, but I am lost in the code; my efforts are not working, and I am beyond frustrated.

I would be very grateful.

ol
{
/* ol: numbered lists */
list-style-type: decimal;
padding-left: 30px;

}

ul
{
/* ul: bullet lists */
padding-left: 24px;

}

ol ol,
ul ol
{
/* second level numbered lists */
list-style-type: circle;
padding-left: 16px;
}

ol ol ol,
ul ol ol,
ul ul ol,
ol ul ol
{
/* third level numbered lists */
list-style-type: square;
padding-left: 16px;
}

ul ul,
ol ul
{
/* second level bullet lists */
list-style-type: circle;
padding-left: 16px;
}

ul ul ul,
ol ul ul,
ol ol ul,
ul ol ul
{
/* third level bullet lists */
list-style-type: square;
padding-left: 16px;
}