Dot Leaders in Kindle

[qqk]

Hi,

I'd like to create something like this on my ebook

ABC ......... 12,000 KG
CDFGH ..... 34,000 KG
IJKL ......... 56,000 KG

With the two columns of text aligned to the left side and the right side of the page respectively. Filling the middle with dots is good to have but not must-have if technically impossible.

What is the best way to implement this in calibre and Kindle ebook?

Many thanks!
QQK

[Brett Merkey]

I have successfully coded dot leaders back when I worked but have not attempted them in the e-book world. I strongly suspect it is do-able in a fairly new Kindle but I have not tested. What is certain: coding them involves various methods that include trickery (transparent background pngs and relative positioning) or advanced CSS objects like pseudo-elements combined with a bit of code nesting. Do a Google search on "dot leaders html css" and then code and test.

The dot leader convention is still not supported in any native way in the digital world.

[pdurrant]

Originally Posted by qqk

Hi,

I'd like to create something like this on my ebook

ABC ......... 12,000 KG
CDFGH ..... 34,000 KG
IJKL ......... 56,000 KG

With the two columns of text aligned to the left side and the right side of the page respectively. Filling the middle with dots is good to have but not must-have if technically impossible.

What is the best way to implement this in calibre and Kindle ebook?

Many thanks!
QQK

Perhaps an HTML table. So long at it's not too big.

[Tex2002ans]

Originally Posted by pdurrant

Perhaps an HTML table. So long at it's not too big.

Yes, this is the correct answer. Don't waste time with dot leaders.

<table>
<tr><td>ABC</td><td>12,000 KG</td></tr>
<tr><td>CDFGH</td><td>34,000 KG</td></tr>
<tr><td>IJKL</td><td>56,000 KG</td></tr>
</table>

If you wanted to adjust alignment, then give the <td> further classes with:

text-align: left;
or
text-align: right;

Originally Posted by qqk

Filling the middle with dots is good to have but not must-have if technically impossible.

Back in 2017 we discussed a little about "dot leaders" in EPUB:

Table-like block with dotted lines

and trying to hack a few things with CSS3... but it won't be supported on devices AT ALL, and are incredibly glitchy.

Just stick with basic HTML tables and you'll be fine. There's no need to try to completely replicated the original Print as long as all the core information still comes across clearly.

[theducks]

you might have better support using a 'bar paper' approach. alternate each lines background color
or
use padding-bottom (spaces away from text) and a border-bottom, to draw a line between (appearance only)