List-like formatting question...

[ElMiko]

I know which of these is easier, but I'm wondering which is the most likely to produce consistent results across e-readers, and what the "failure" scenarios would look like. What I'm trying to accomplish is a kind of list-like styling that retains its justification without changing the distance between the "bullet" and the "text". (Consequently, a straight-forward hanging indent won't do the trick).

CSS:

.litem {
	text-align: justify;
	margin: 0 0 0 4em;
	}
span.lbullet {
	font-weight: bold;
	float:left;
	margin: 0 1em 0 -4em;
   }

CODE:

<p class="litem"><span class="lbullet">A (1 [c])</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

or...

CSS:

td.tdlefths {
	font-weight: bold;
	margin: 0;
	padding: 0;
	text-align: left;
	vertical-align: top;
	white-space: nowrap;
	}
td.tdrighths {
	padding: 0 0 0 1em;
	margin: 0;
	text-align: left;
	vertical-align: top;
	}
.left {
	margin: 0;
	text-align: left;
	}
.just {
	margin: 0;
	text-align: justify;
	}

CODE:

  <table>
    <tbody>
      <tr>
        <td class="tdlefths">
          <p class="left">A (1 [c])</p>
        </td>

        <td class="tdrighths">
          <p class="just">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </td>
      </tr>
    </tbody>
  </table>

In my experience, and particulularly when converting to other formats, both floats and tables can get real wonky...

In the first scenario, I see the potential for issues if there are multiple list items with variable length "bullets", resulting in disalignment across the "text" elements (i.e. distance between the bullet and the text will be preserved, but the text will vary relative the left-most marging depending on the length of the "bullet"). The second scenario is just very busy and, like i said, the use of the <table> element makes me a little skeptical.

To be clear, if there are other suggestions out there, I'm open to those too, but again, it'd be helpful to know what the failure scenarios are (knowing that there is no "one-size-fits-all" solution in the world of ebooks).

[nabsltd]

Why is it that CSS standard lists won't result in the correct display?

In other words, if you are looking for some way to create lists that work on platforms that don't support CSS lists, then my answer would be to ignore those platforms. CSS lists have been around since version 1 of CSS and any reader that doesn't support at least the basic CSS list properties probably isn't worth targeting.

[Turtle91]

Originally Posted by nabsltd

Why is it that CSS standard lists won't result in the correct display?

In other words, if you are looking for some way to create lists that work on platforms that don't support CSS lists, then my answer would be to ignore those platforms. CSS lists have been around since version 1 of CSS and any reader that doesn't support at least the basic CSS list properties probably isn't worth targeting.

Exactly!


Worst case - if you realllllllly need to support those really bad/old renderer's...have a second css file.

[KevinH]

FWIW, from an Accessibility framework, using a normal list (ordered or unordered) styled the way you want with CSS, is much better as the tags themselves document exactly what you are trying to achieve. So no additional aria role information is needed.

A long time ago, someone wrote a popular "create an epub" guide and advised people to create their own headings from P tags, their own list (instead of list tags), use tables or blockquotes for indentation, and etc..

That one popular guide did more to damage the creation of epubs for accessibility (and in general) than anything else. I am constantly see people creating headings from paragraphs instead of css styling the h1-h6 tags themselves.

Tags have names that reveal both structure and meaning and they should be used. Using the right tags will not hold back the visual display when you can use css to style just about anything any way you want. Using the proper tags is very important for accessibility, archiving, and search of any digital publication.

Sermon done.

[ElMiko]

Originally Posted by nabsltd

Why is it that CSS standard lists won't result in the correct display?

To my knowledge, there is very limited flexibility on the list markers (ordered or unordered). For example, I don't know how to specify the desired list "number" as shown in the examples using ol/ul/li css...

EDIT: to be clear, I have seen some CSS-based workarounds for custom bullets..

e.g.

ul {
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}

li {
  padding-left: 1em;
  text-indent: -1em;
}

li:before {
  content: "+";
  padding-right: 5px;
}

but that doesn't work for a multiple-item ordered list.