Any way to indent the second line of paragraph if it wraps?

[Lukusaukko]

The title is the question. I'd like to format a block of text so that if I resize the window on a desktop, resize the text, or view on device with different line length, the second line would indent itself, so it would be obvious that the line wraps.

Is this even possible using standard CSS? Much less anything that would be supported across various devices? I've tried using something like setting a negative indent with a p::first-line selector - for example, I have this code in my CSS file, and the <div> block housing the poem has the class="blockq poem".

div.blockq {
  padding: 1em 1.5em 1em 1.5em;
}
.poem p {
  text-indent: 1.5em;
}
.poem p::first-line {
  text-indent: -1.5em;
}

This works in Calibre Editor, but in the Viewer it looks like the first-line element is simply ignored. Is there any way I could accomplish what I want, or should I just give up because the readers probably won't ever support the full CSS spec?

[Karellen]

Sounds like you want a hanging indent.

I am not sure of your use case, or why you have 3 classes to do it, but try...

.hanging {
  margin-left: 1em;
  margin-bottom: 0.5em;
  text-indent: -1em;
}

pseudo-elements may not work in some readers.

[Lukusaukko]

Originally Posted by Karellen

Sounds like you want a hanging indent.

Thanks, that does work if I use <div class="blockq hanging"> and set the CSS to:

.hanging > p {
  margin-left: 1em;
  text-indent: -1em;
}

The three classes were because the text in question had many direct quotes, letters, etc. and this one poem - in the other cases it doesn't really matter how the line wraps, but in poetry it often does; so the first class was to set the padding/margins of all intended text to same, and the other two for the poem (since you'd need one class to set the body, and the other class to set the first-line pseudo-element, if it worked). But as it looks like the support isn't there, this works just as well, and uses one class less.

[Karellen]

.hanging > p

I don't know how well supported element>element is in ereaders.

Just remember that epubs use a subset of css. Don't get to high tech when defining your stylesheet. For the best support in ereaders, make it as simple as possible.

[RbnJrg]

Originally Posted by Lukusaukko

The title is the question. I'd like to format a block of text so that if I resize the window on a desktop, resize the text, or view on device with different line length, the second line would indent itself, so it would be obvious that the line wraps.

Why don't use simply :

p.neg_indent {
  margin: 2em; /* of course, you can write here another value */
  text-indent: -2em; /* of course, you can write here another value */
  line-height: 1.2em;
}

By the way, with JS you can get a nice layout for poetry:

https://www.mobileread.com/forums/sh...29&postcount=5

Of course JS is only for epub3.

Regards

[DNSB]

Originally Posted by RbnJrg

Why don't use simply :

p.neg_indent {
  margin: 2em; /* of course, you can write here another value */
  text-indent: -2em; /* of course, you can write here another value */
  line-height: 1.2em;
}

Should the margin: 2em; not be margin-left: 2em; since your code would result in top, bottom, right and left margins being set to 2em. I would also dump the line-height but that's a personal preference to setting line-height in 1 place only unless there is a need for a different line height.

[RbnJrg]

Originally Posted by DNSB

Should the margin: 2em; not be margin-left: 2em; since your code would result in top, bottom, right and left margins being set to 2em. I would also dump the line-height but that's a personal preference to setting line-height in 1 place only unless there is a need for a different line height.

You are right! And the code also would be more efficient of the following way:

div.negindent p {
    margin-left: 2em;
    text-indent: -2em;
    line-height: 1.2em; /* of course, here you can write whatever, or supress the property */
}

[nabsltd]

Originally Posted by Lukusaukko

This works in Calibre Editor, but in the Viewer it looks like the first-line element is simply ignored.

It should be ignored, at least as far as the CSS spec is concerned. Only the following properties are supported in the "first-line" selector:

• font properties
• color properties
• background properties
• word-spacing
• letter-spacing
• text-decoration
• vertical-align
• text-transform
• line-height
• clear

Text indent, padding, etc., should be ignored.

[Lukusaukko]

Originally Posted by nabsltd

It should be ignored, at least as far as the CSS spec is concerned. Only the following properties are supported in the "first-line" selector:

Works in Editor, though, which is a bit strange... Anyway, thanks to all who contributed, I've got it sorted now. Also, note to self: don't try anything too fancy...

[RbnJrg]

Originally Posted by Lukusaukko

Works in Editor, though, which is a bit strange... Anyway, thanks to all who contributed, I've got it sorted now. Also, note to self: don't try anything too fancy...

Why? Calibre Viewer is a great piece of software, based on one of the latest versions of webkit, and supports the epub3 protocol very well. So, anything "too fancy" also will work on Calibre Viewer. Your issue is that you employed the wrong property; you used "first-line" when you should use "first-child" or "firts-of-type" with the sibling combinator "~". For example:

div.indented {
  padding: 1em 1.5em 1em 2em;
}

div.indented p {
  margin: 0.5em 0 0.5em 1.5em;
  line-height: 1.2em;
}

div.indented p:first-child {
  text-indent: -1.5em;
}

div.indented p:first-child ~ p {
  text-indent: -1.5em;
}

Watch the epub I attach. And here you can watch how it looks on Calibre Viewer and also on Sigil:



Of course, all that "fancy code" (is not fancy, is trivial) is not neccesary because the effect can be achieved with less code and simpler (as I wrote in my previous post). But I include all this css so you can be sure that Calibre Viewer will support advanced css properties and selectors.

[JSWolf]

Line-height of 1.2 is too large.

[Quoth]

Originally Posted by JSWolf

Line-height of 1.2 is too large.

For your taste. It's actually pretty standard.

I remove all LH references so default font metrics are used for line spacing and also user can then change it.

[JSWolf]

Originally Posted by Quoth

For your taste. It's actually pretty standard.

I remove all LH references so default font metrics are used for line spacing and also user can then change it.

I agree to dump most line-height references so the user can adjust. There are some cases where it's not possible to change the line-height. But then you get whatever the default is based on the program and font being used. You don't want to have code that causes user adjustable settings to break.

[Tex2002ans]

Originally Posted by Karellen

Sounds like you want a hanging indent.

I am not sure of your use case, or why you have 3 classes to do it, but try...

Poems and poetry HTML+CSS?

Then there's only one thread you'll need:

• 2022: "A bit of poetry CSS you may find useful"

Jellby's posts or my posts use the ol' 3 class method—poem, stanza, line—I think it's the cleanest+best way.

Simple, clean code that doesn't rely on overly complex CSS selectors or anything, so it works everywhere.

- - -

Side Note: If you want more info on poetry + negative indents + indentation in Indexes/TOCs, also see:

• 2022: "Poetry Classes: Blockquote vs Div?"

And, as always, you can type this into your favorite search engines:

poetry Tex2002ans site:mobileread.com
negative indent Tex2002ans site:mobileread.com

to find lots of information all about it.

[JSWolf]

CSS code:

.wrap {
  margin-left: 1.2em;
  text-indent: -1.2em;
}