Shifty Dot Leader?

enuddleyarbl · 09-27-2022, 04:54 PM

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:

Code:

.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:

Code:

<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?

Turtle91 · 09-27-2022, 05:32 PM

Not sure of ALL the ramifications, but have you tried using a margin-left, or padding-left, on the <ul>/<li> instead of text-indent??

I also added a little padding to the right and left of the spans to have a little bit of space between the dots and the letters.

Code:

<head>
  <title></title>

<style>
ul {margin:0; padding:0}
li {margin:0; padding-left:2em}

.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;

}
.dotleaderline span {padding:0 .25em}

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

</style>
</head>

<body>
<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>
</body>
</html>

fyi: This seems to work in Sigil's Previewer, but will probably not work in all devices.

enuddleyarbl · 09-27-2022, 07:40 PM

Quote:

Originally Posted by Turtle91

Not sure of ALL the ramifications, but have you tried using a margin-left, or padding-left, on the <ul>/<li> instead of text-indent??...

I should have included my ul_none class for my <ul>. Sorry:

Code:

.ul_none	{
/* Unordered List No Bullet */
	display: block;
	list-style-type: none;
	margin-left:	1.2em;
	margin-right: 1.2em;
	padding-left: 1.5em;
	text-indent:	-1.5em;
}

So, I do have those margin-left and padding-left in there. But, I really want to keep my text-indents, too.

However, if I just bite the bullet and include a text-indent:0 in the dotleaderline class, that does fix the shifty dots (at the expense, of course, of the indent):

Code:

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

And, I do like your padding in a span class. It makes the line look much better:

Code:

.dotleaderline span {
/* Put some space between the spanned objects in the dotleaderline */
  padding-top:	0em;
  padding-right:	1.25em;
  padding-bottom:	0em;
  padding-left:	1.25em;
}

enuddleyarbl · 09-27-2022, 07:49 PM

About using this outside of a list, it looks like I was wrong about the behavior being the same. If I use a paragraph to hold the spans, the whole line get's scrunched around. If I use a div to hold them, it looks fine.

I'm still trying to figure out what's happening there.

Karellen · 09-27-2022, 07:52 PM

FWIW, I use definition lists for my character summaries.

Code:

<dl>

    <dt>Zarvora Cybeline</dt>
    <dd>Highliber of Libris, the mayoral library, at 26 years old</dd>

    <dt>Lemorel Milderellen</dt>
    <dd>From Rutherglen Unitech library. Dragon Orange level at nineteen years old</dd>

    <dt>Vellum Drusas</dt>
    <dd>Deputy Overliber, Inspectorate Service</dd>

</dl>

Then style it in the CSS page.

enuddleyarbl · 09-27-2022, 08:01 PM

Quote:

Originally Posted by Karellen

FWIW, I use definition lists for my character summaries.

Code:

<dl>

    <dt>Zarvora Cybeline</dt>
    <dd>Highliber of Libris, the mayoral library, at 26 years old</dd>

    <dt>Lemorel Milderellen</dt>
    <dd>From Rutherglen Unitech library. Dragon Orange level at nineteen years old</dd>

    <dt>Vellum Drusas</dt>
    <dd>Deputy Overliber, Inspectorate Service</dd>

</dl>

Then style it in the CSS page.

Yep. Using <dl> is probably better than <ul> for this. I just went with <ul> because that's what I used as a quick and dirty workaround for the original sequential paragraphs with periods.

Probably don't need the dot leaders with <dl>, but I wonder if it's doable. EDIT: Doesn't look like it would be either desirable or doable to put dot leaders in a <dl>. The basic form would be enough.

enuddleyarbl · 09-27-2022, 08:03 PM

Looks like I'll also have to add margin-top and margin-bottom set to 0 into the dotleaderline class. It appears that the default <li> has some positive spacing there and it spaces things out more.

09-27-2022, 04:54 PM	#1
enuddleyarbl Guru Posts: 734 Karma: 1077122 Join Date: Sep 2013 Device: Kobo Forma	Shifty Dot Leader? 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: Code: .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: Code: <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?

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
I Come in Peace! Take Me to Your Leader!	Ghod	Introduce Yourself	2	01-28-2017 05:55 PM
Take me to your leader!!!	Mad Genuis	Introduce Yourself	14	06-13-2010 12:27 AM
I come in peace! Take me to your leader!	Shyriath	Introduce Yourself	10	02-27-2009 02:38 PM

09-27-2022, 07:49 PM	#4
enuddleyarbl Guru Posts: 734 Karma: 1077122 Join Date: Sep 2013 Device: Kobo Forma	About using this outside of a list, it looks like I was wrong about the behavior being the same. If I use a paragraph to hold the spans, the whole line get's scrunched around. If I use a div to hold them, it looks fine. I'm still trying to figure out what's happening there.

09-27-2022, 08:03 PM	#7
enuddleyarbl Guru Posts: 734 Karma: 1077122 Join Date: Sep 2013 Device: Kobo Forma	Looks like I'll also have to add margin-top and margin-bottom set to 0 into the dotleaderline class. It appears that the default <li> has some positive spacing there and it spaces things out more.

Advert

Advert