View Single Post
Old 06-24-2025, 03:27 PM   #1
ElMiko
Evangelist
ElMiko has read every ebook posted at MobileReadElMiko has read every ebook posted at MobileReadElMiko has read every ebook posted at MobileReadElMiko has read every ebook posted at MobileReadElMiko has read every ebook posted at MobileReadElMiko has read every ebook posted at MobileReadElMiko has read every ebook posted at MobileReadElMiko has read every ebook posted at MobileReadElMiko has read every ebook posted at MobileReadElMiko has read every ebook posted at MobileReadElMiko has read every ebook posted at MobileRead
 
ElMiko's Avatar
 
Posts: 455
Karma: 65460
Join Date: Jun 2011
Device: Kindle
List-like formatting question...

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:
Code:
.litem {
	text-align: justify;
	margin: 0 0 0 4em;
	}
span.lbullet {
	font-weight: bold;
	float:left;
	margin: 0 1em 0 -4em;
   }
CODE:
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:
Code:
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:
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).

Last edited by ElMiko; 06-24-2025 at 03:34 PM.
ElMiko is offline   Reply With Quote