10-29-2023, 03:19 PM | #1 |
Enthusiast
Posts: 43
Karma: 392326
Join Date: Feb 2023
Device: Kobo Libra 2
|
Any way to indent the second line of paragraph if it wraps?
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". Code:
div.blockq { padding: 1em 1.5em 1em 1.5em; } .poem p { text-indent: 1.5em; } .poem p::first-line { text-indent: -1.5em; } |
10-29-2023, 03:26 PM | #2 |
Wizard
Posts: 1,106
Karma: 4911876
Join Date: Sep 2021
Location: Australia
Device: Kobo Libra 2
|
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... Code:
.hanging { margin-left: 1em; margin-bottom: 0.5em; text-indent: -1em; } |
10-29-2023, 04:28 PM | #3 |
Enthusiast
Posts: 43
Karma: 392326
Join Date: Feb 2023
Device: Kobo Libra 2
|
Thanks, that does work if I use <div class="blockq hanging"> and set the CSS to:
Code:
.hanging > p { margin-left: 1em; text-indent: -1em; } |
10-29-2023, 04:39 PM | #4 |
Wizard
Posts: 1,106
Karma: 4911876
Join Date: Sep 2021
Location: Australia
Device: Kobo Libra 2
|
.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. |
10-29-2023, 11:49 PM | #5 | |
Wizard
Posts: 1,551
Karma: 6613969
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
|
Quote:
Code:
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; } https://www.mobileread.com/forums/sh...29&postcount=5 Of course JS is only for epub3. Regards Last edited by RbnJrg; 10-30-2023 at 12:45 AM. |
|
10-30-2023, 01:02 AM | #6 |
Bibliophagist
Posts: 35,513
Karma: 145557716
Join Date: Jul 2010
Location: Vancouver
Device: Kobo Sage, Forma, Clara HD, Lenovo M8 FHD, Paperwhite 4, Tolino epos
|
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.
|
10-30-2023, 08:03 AM | #7 | |
Wizard
Posts: 1,551
Karma: 6613969
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
|
Quote:
Code:
div.negindent p { margin-left: 2em; text-indent: -2em; line-height: 1.2em; /* of course, here you can write whatever, or supress the property */ } |
|
10-30-2023, 01:10 PM | #8 | |
Evangelist
Posts: 417
Karma: 6913952
Join Date: Aug 2013
Location: Hamden, CT
Device: Kindle Paperwhite (11th gen), Scribe
|
Quote:
|
|
10-30-2023, 01:57 PM | #9 |
Enthusiast
Posts: 43
Karma: 392326
Join Date: Feb 2023
Device: Kobo Libra 2
|
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...
|
10-30-2023, 04:46 PM | #10 | |
Wizard
Posts: 1,551
Karma: 6613969
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
|
Quote:
Code:
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; } 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. Last edited by RbnJrg; 10-30-2023 at 04:49 PM. |
|
10-30-2023, 09:09 PM | #11 |
Resident Curmudgeon
Posts: 74,037
Karma: 129333114
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
Line-height of 1.2 is too large.
|
10-31-2023, 06:51 AM | #12 |
the rook, bossing Never.
Posts: 11,171
Karma: 85874891
Join Date: Jun 2017
Location: Ireland
Device: All 4 Kinds: epub eink, Kindle, android eink, NxtPaper11
|
|
11-02-2023, 01:39 PM | #13 |
Resident Curmudgeon
Posts: 74,037
Karma: 129333114
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
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.
|
11-03-2023, 10:45 PM | #14 | |
Wizard
Posts: 2,297
Karma: 12126329
Join Date: Jul 2012
Device: Kobo Forma, Nook
|
Quote:
Then there's only one thread you'll need: 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: And, as always, you can type this into your favorite search engines: Code:
poetry Tex2002ans site:mobileread.com negative indent Tex2002ans site:mobileread.com Last edited by Tex2002ans; 11-03-2023 at 10:51 PM. |
|
11-03-2023, 11:33 PM | #15 |
Resident Curmudgeon
Posts: 74,037
Karma: 129333114
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
CSS code:
Code:
.wrap { margin-left: 1.2em; text-indent: -1.2em; } |
|
Similar Threads | ||||
Thread | Thread Starter | Forum | Replies | Last Post |
Regex to count line wraps? | kboogie222 | Library Management | 12 | 09-15-2019 09:12 PM |
noindent first line, indent all other lines, same paragraph, possible? | patrik | ePub | 3 | 02-15-2016 11:36 AM |
How do I set paragraph indent? | pargoo | Sigil | 17 | 11-09-2013 06:38 PM |
Selective paragraph indent | Leonatus | Writer2ePub | 8 | 10-31-2013 04:22 PM |
Preference: Paragraph indent or a little paragraph spacing? | 1611mac | General Discussions | 48 | 11-11-2011 12:43 AM |