Controlling indents for bulleted lists

[marst]

(Apologies-in-advance if this should have been posted in a different part of the forums -- this does pertain to creating lists that will end up in EPUB files.) I've been trying to create hanging bulleted text as shown in the attached screen shot -- to control left margin of the list and also the space between bullets and their associated text. It seems impossible with a standard "unordered list" -- you're stuck with the default bullet-to-text space.

Multiple trips to Google and Stack Overflow suggest it can be done with adjacent elements each with CSS definitions that include "float:left". The first would contain the bullet character, and the second the associated text. But so far every experiment with this has produced problems:

1. As soon as the text associated with a bullet is long enough to wrap at the edge of the window, the whole block of text moves below the bullet.

2. Any paragraph below the second of the elements with "float:left" "collapses" into the block of text above it.

3. Changing the size of the bullet (the sole content of the first element with "float:left") shifts the bullet upward or downward, mis-aligning it.

This kind of thing is so simple in Word or in page-composition programs. There must be a way to do it via CSS without these alignment problems. Advice much appreciated...

[marst]

Just hacking around I did happen across a combination of tags and CSS instructions that seem to work. But, this is clearly not the purpose of a "DL" and is thus not Semantically Correct.

dt.bullet {
  float:left;
}

dd.bullet-text {
  margin-left:2.5em;
  margin-bottom:0.4em;
}

In use:

<dl>
  <dt class="bullet">o</dt> <!-- whatever the bullet char might be -->
  <dd class="bullet-text">The text associated with this bullet goes here.</dd>
</dl>

It's probably a truly horrible idea. Yet, it does seem to do the job and displays as I expected in at least one Android e-reader (Mantano Reader). How it might display elsewhere, I don't know yet.

[odedta]

li{
padding-left:2.5em;
word-wrap:normal;
}

Is this what you're looking for?

[marst]

Thanks — the padding attribute certainly solves the problem of the bullet spacing. How interesting. Either I've simply missed obvious parts of the discussions I've read up to now, or it hasn't come up in them. The bullet size and overall left indent are still uncontrolled (unless there are yet other CSS commands for them that I've missed in sundry discussions).

The test actually looked like this:

dt.bullet {
  float:left;
  font-family:sans-serif;
  color:gray;
  margin-left:0;
}
dd.bullet-text {
  margin-left:1.75em; <!-- adjust as need be -->
  margin-bottom:0.4em; <!-- likewise -->
}

The "bullet" character — I have been trying a single lower-case "O" ("oh," not zero). It isn't quite what I'm after but looks better to me than the tiny bullet provided by "<ul>". I'd prefer a thinner open disk but haven't found just what I'm after yet, at least as an HTML entity.

[mrmikel]

If you have the calibre editor, there are thousands of special characters...BUT the font would have to support them. You might be better off finding your bullet as an image and putting it in there directly.

[marst]

Yes, I suspect it will have to be an image.

[Jellby]

Originally Posted by marst

The "bullet" character — I have been trying a single lower-case "O" ("oh," not zero). It isn't quite what I'm after but looks better to me than the tiny bullet provided by "<ul>". I'd prefer a thinner open disk but haven't found just what I'm after yet, at least as an HTML entity.

Like this? http://www.fileformat.info/info/unic...25cb/index.htm

[RbnJrg]

Originally Posted by marst

The "bullet" character — I have been trying a single lower-case "O" ("oh," not zero). It isn't quite what I'm after but looks better to me than the tiny bullet provided by "<ul>". I'd prefer a thinner open disk but haven't found just what I'm after yet, at least as an HTML entity.

Maybe you could get it with:

ul {
    list-style-type: circle;
}

But I'm not sure if that is what you are looking for.

[marst]

Originally Posted by Jellby

Like this? http://www.fileformat.info/info/unic...25cb/index.htm

That looks like just the thing, thanks. Then I found my e-reader app (on a tablet) won't display it! Time for a bug report...

[marst]

Originally Posted by RbnJrg

Maybe you could get it with:

ul {
    list-style-type: circle;
}

But I'm not sure if that is what you are looking for.

That 'disc' is a bit small. It could work in a pinch, but <ul> itself isn’t quite what I’m after. The <dl> workaround is about right, though it's semantically off-kilter, as it were.

[mrmikel]

It isn't a bug if it isn't part of the font character set.

[DaleDe]

Try list-style-image:url('sqpurple.gif'); and supply your own image. This may not be supported in ePub.