Lists: adjusting vertical positioning of bullet with graphic

[ChoccieMuffin]

I am using <ul> and <ol> lists with <li> list items for bulleted and numbered lists of instructions. This is predominantly for a PDF output, though I intend also taking it to webhelp.

Sometimes I need to include a small screenshot or icon when telling the user what to click on, and my problem is that when I have an icon that is larger than the height of the text, the bullet or number at the beginning of the list doesn't align with the text but is centred vertically on the affected line.

Is there any way I can make the number or bullet line up with the text?

As a subsidiary question, how to I adjust the positioning of the icon in the paragraph. I have applied specific <img> classed to graphics used in this circumstance, but I can't get the vertical alignment right. I have tried every option in the list for the vertical-align attribute, and while text-top is the best of a bad bunch for the little icon, I can't get anything that looks even vaguely acceptable for the slightly larger icon.

Suggestions very welcome.

bullet sample.png

[LTinker68]

For something the size of that ALT graphic I'd probably float the graphic to the right of the bullet instead of trying to insert it inline. If you really want it inline, try setting it to middle or text-bottom and/or create a custom <li> tag with a larger line-height attribute. It might still look off, though, because of the size of the graphic, which is why I say float the graphic right on a bulleted list, then you could change your text to say something like "Click the ALT icon (shown at right) to...".

[RamonS]

I was about to propose the text solution as well, but while that works fine for the "Alt" button the " button is not that easy to describe. I assume it is used to pause some process. When writing about the "pause button" one can only hope that the symbol associated with this task is so common that the user has no problem understanding it.

[LTinker68]

The pause button looked ok to me. Since it's smaller it's not all that much bigger than the text so there isn't as much displacement, although the displacement is noticeable. I'd also try to be consistent on the icon size so you don't have some inline and some floating right. In the case of the ALT icon, for instance, does all that extra brown(?) padding in the icon need to be included, or could you crop the edges of it a bit to make it smaller so it's closer in size to the pause button. If you don't want to crop the ALT icon, then I'd use a larger version of the pause icon and have both icons float to the right of their respective bullets, although you do have to be careful doing that, too -- if the text in the bullet is less than a line in length then that could result in the floated graphics being close to each other and one may push the other to the side a bit.

Another option, if you're describing a bunch of icons or buttons is to use a table -- put the icon/button in the first column and a description in the second column. All the icons/bullets are lined up with each other and their text descriptions are lined up as well.

[ChoccieMuffin]

Hi guys

Thanks for your feedback, but it doesn't really answer the question, and doesn't really help with the problem. I have two "sets" of icons that have two different sizes, so just making them all small simply doesn't work. As you say, the pause button doesn't look too bad but the bigger size looks horrible.

In both cases, I would like to be able to specify that the bullet (or number, the same thing happens with them) appears on the same baseline as the words, even if the graphic sticks up above the line, drops below the line or both.

In both cases, I would like to be able to control the positioning of the graphic a bit better, as none of the alternatives helped with the larger icon, which jumped violently from being right up the top to right down the bottom.

Also, I have had problems trying to float graphics beside lists - in brief, it didn't work and either the graphic disappeared or the bullet did (I can't remember which, just that it was a pain and resulted in me having to use tables.)

Any other suggestions, particularly regarding the placing of the bullet relative to the text, as that's a big pain in the rear end.

[LTinker68]

There is a bug with floating images to the left of lists, but I thought it worked for floating right.

As for positioning the icon inline then probably baseline or text-bottom are your best options. You could try a custom paragraph with bulleted auto-numbering to see if that behaves better. The HTML ul/ol and li tags may have constraints on how images can be placed in them, but a custom paragraph might give you better results. You could also try adding some margin- or padding-top to the <li> tag to give you some separation between list items -- maybe that'll help with the positioning of the icons.

[NorthEast]

Not much help, I know, but this issue only happens in the PDF output; the bullet will be correctly aligned in WebHelp.

[ChoccieMuffin]

So would you suggest I re-do my <li.bullet> style to use an auto image? Would that work? I have loads of instructions that use numbered and bulleted lists and I'd rather not have to use a different <li> style depending on whether the content includes an image or not.

Also, how would that work with numbered lists?

[NorthEast]

So would you suggest I re-do my <li.bullet> style to use an auto image? Would that work? I have loads of instructions that use numbered and bulleted lists and I'd rather not have to use a different <li> style depending on whether the content includes an image or not.

Also, how would that work with numbered lists?

I changed my post above - I hadn't checked it properly in PDF.

Both normal and graphic bullets align properly in WebHelp (although curiously they're not displayed correctly in the Flare editor).

[ChoccieMuffin]

Hmm... any other suggestions that I could try? This is yet another negative point about Flare, so I think I'll have to put in a feature request, or bug report, or whatever it is.

The suggestions that have been made are very creative, but unfortunately there's a reason why each of them wouldn't be practical. I've only just spotted Lisa's suggestion for a table, and indeed I do use tables in other parts of the document where I'm writing descriptions of what various icons mean, but bulleted and numbered lists are used specifically for instructions, so a table just isn't sufficient.

[LTinker68]

So would you suggest I re-do my <li.bullet> style to use an auto image?

I don't mean use the icon as the bullet icon. I mean create a custom class that uses the standard bullet •. If you insert the icon inline in that custom paragraph then you might have better results, because a paragraph has different rules than a line item. I don't know that it will work, but it might give you some more flexibility.

[ChoccieMuffin]

Thanks Lisa, I'd figured out that was what you meant.

I'll have to have a play to see how to do it. Do you suggest that I create a <p> class that I use inside a <ul> list, or do I have to remove the list completely and just have paragraphs? Sorry for asking stupid questions, and I predict I'll have to ask more before I manage to do it!

[LTinker68]

You might have to try both. Try it with a standalone paragraph class first, in fact, just try it with a normal paragraph and see if you get better positioning of the icon. If you do, then you know that a custom paragraph with auto-numbering will work. You could also make a paragraph item out of a line item, which means it inserts a <p> tag inside a <li> tag, and see if that gives you greater flexibility. You might still be restricted because the <li> is still the parent container tag, but maybe the <p> tag separates it enough to work. If it does, then you don't need to make a custom paragraph class, you just have to remember to change a <li> tag to an <li> tag with embedded <p> tag (click on the List Actions arrow and select Make Paragraph Items).

If those don't work, post the dimensions for that "ALT" graphic and I'll mock up a graphic and see if I can figure out how to position it better.

[ChoccieMuffin]

A solution of sorts by adjusting other stuff that I wouldn't have thought of, so I've posted the solution that worked for me here, in case it's of help for others.

As I see it it only works if:
the graphics aren't TOO massive
there is sufficient space between paragraphs

Fixed bullets and numbers.png

[Doug Eaton]

The technical solution here looks good, but, in my opinion, one overlooked issue is that the graphics dominate the text and may impede usability.

[ChoccieMuffin]

The examples given here are just to show the sort of position I want to use the graphics in, not the context in which they're used. I am happy that I am using the real graphics in the right place and rather than impeding usability, actually assist it. But thanks for your input, it's always useful to get the views of colleagues.