[enuddleyarbl]

I just played with a book that included a dramatis personae that had a fixed number of periods as a dot leader between the character name and his description. I worked around that, but afterward, I looked for a css class to automatically fill in the gap between two pieces of text. I found some references to CSS3 supposedly having that function built in:

https://www.w3.org/TR/css-gcpm-3/#leaders

but 1) haven't been able to figure it out, and 2) don't know if was actually implemented.

Anway, looking around the web, I found alternative ways and tried this:

.dotleaderline	{
/* Turns a block into a flexbox so it can be "responsive" */
	display:	flex;
	flex-direction:	row;
	flex-wrap:	nowrap;
	justify-content:	center;
	align-items:	flex-end;
}

.dotfiller	{
/* Stuck between two objects in a flexbox, will fill the gap with dots */
	flex-grow:	1;
	border-bottom:	0.1em dotted;
	min-width:	1.2em;
}

So, something of class dotfiller goes between two objects within the dotleaderline flexbox and it fills in between them with dots. If I use a list to test this, it looks like:

<ul class="ul_none">
<li class="dotleaderline"><span>first text</span><span class="dotfiller"/><span>last text</span></li>
<li class="dotleaderline"><span>another text</span><span class="dotfiller"/><span>even more last text</span></li>
</ul>

But, it doesn't have to be a list. Plain old divs with paragraphs will work just the same.

The problem is that if there's a text-indent being applied to the objects, the set of dots gets shifted (left or right) by that text-indent and end up in the middle of the actual text. I haven't been able to find a way to override those text-indents and get this to work. The only thing I've found so far is simply setting that text-indent to 0.

Anyone have a better idea?