11-09-2020, 11:21 AM | #1 |
Wizard
Posts: 1,079
Karma: 412718
Join Date: Jan 2009
Location: Valley Forge, PA, USA
Device: Kindle Paperwhite
|
CSS Question
I have <p> with text-indent = 2em since the vast majority of the time that's the default for a basic text paragraph.
Sometimes however (usually for a a group specially formatted paragraphs I use <p class="noindent"> I've tried to bracket a group with <div class="noindent"> ... </div> but the class seems to be ignored. If I can't do that, is there another way to 'turn off' indenting for a block of paragraphs? Spoiler:
and Spoiler:
|
11-09-2020, 11:28 AM | #2 |
Bibliophagist
Posts: 36,424
Karma: 145748708
Join Date: Jul 2010
Location: Vancouver
Device: Kobo Sage, Libra Colour, Lenovo M8 FHD, Paperwhite 4, Tolino epos
|
Remember that CSS stands for cascading style sheet. In your example, the <div> is prior to the <p> so the <p> would be the final entry which results in the indent applying.
My personal choice is the base <p> has text-indent set to 0 and each paragraph that is indented get <p class="indent"> but that still wouldn't help you. |
Advert | |
|
11-09-2020, 11:48 AM | #3 | |
Guru
Posts: 945
Karma: 1183425
Join Date: Dec 2016
Location: Goiânia - Brazil
Device: iPad, Kindle Paperwhite
|
Quote:
So, here is another way: Code:
p { text-indent: 2em; } .noindent p { text-indent: 0em; } |
|
11-09-2020, 12:35 PM | #4 | |
Bibliophagist
Posts: 36,424
Karma: 145748708
Join Date: Jul 2010
Location: Vancouver
Device: Kobo Sage, Libra Colour, Lenovo M8 FHD, Paperwhite 4, Tolino epos
|
Quote:
Spoiler:
|
|
11-09-2020, 12:51 PM | #5 | |
Guru
Posts: 945
Karma: 1183425
Join Date: Dec 2016
Location: Goiânia - Brazil
Device: iPad, Kindle Paperwhite
|
Quote:
Code:
p { text-indent: 2em; } .noindent { text-indent: 0em; } .noindent p { text-indent: 0em } In other cases, you might need to apply it to everything but a specific class (let's call it 'special'); then you could declare it like this: Code:
.noindent p:not(.special) { text-indent: 0em } Code:
h1 + p { text-indent: 0em } Last edited by thiago.eec; 11-09-2020 at 01:43 PM. Reason: typo |
|
Advert | |
|
11-09-2020, 02:05 PM | #6 |
Wizard
Posts: 1,079
Karma: 412718
Join Date: Jan 2009
Location: Valley Forge, PA, USA
Device: Kindle Paperwhite
|
@all - Thanks for the suggestions
The .noindent p seems to be the solution I can still use just .noindent for paragraphs not bracketed by <div> and it works |
11-09-2020, 02:13 PM | #7 |
Running with scissors
Posts: 1,552
Karma: 14325282
Join Date: Nov 2019
Device: none
|
A somewhat confusing way you could do it is to say
Code:
p { text-indent: 0; } p + p { text-indent: 2em; } Clever, but as I said, confusing. |
11-09-2020, 02:45 PM | #8 | |
Guru
Posts: 945
Karma: 1183425
Join Date: Dec 2016
Location: Goiânia - Brazil
Device: iPad, Kindle Paperwhite
|
Quote:
|
|
11-09-2020, 03:26 PM | #9 |
Running with scissors
Posts: 1,552
Karma: 14325282
Join Date: Nov 2019
Device: none
|
True. I should have said it was another way to do unindented paragraphs which is typically done after h and other tags, e.g., your h1+p example.
|
11-09-2020, 03:44 PM | #10 |
Running with scissors
Posts: 1,552
Karma: 14325282
Join Date: Nov 2019
Device: none
|
Dunno if this is helpful but another thing I do is chain or stack classes. There are things that I consider "blocks" that are inset and styled differently than the running body; letters, telegrams, articles, etc. A lot of times you see blockquote used for this but some argue that that's semantically incorrect, which I go along with (although to me it's 50/50 but I'll go along with those who probably know more than I do).
So I have a basic block that's a div Code:
div.block { margin-left: auto; margin-right: auto; margin-top: 1em; width: 85%; } Code:
div.article { font-family: sans-serif; } div.letter p { font-style: italic; hyphens: none; } Code:
<div class="block letter"><p>blah</p><p>blah</p></div> Code:
<div class="article block">First article sentence.</div> <div class="letter block">First letter sentence.</div> |
11-09-2020, 04:08 PM | #11 | |
Bibliophagist
Posts: 36,424
Karma: 145748708
Join Date: Jul 2010
Location: Vancouver
Device: Kobo Sage, Libra Colour, Lenovo M8 FHD, Paperwhite 4, Tolino epos
|
Quote:
|
|
11-09-2020, 04:19 PM | #12 | |
Guru
Posts: 945
Karma: 1183425
Join Date: Dec 2016
Location: Goiânia - Brazil
Device: iPad, Kindle Paperwhite
|
Quote:
|
|
11-09-2020, 04:42 PM | #13 | |
Wizard
Posts: 1,079
Karma: 412718
Join Date: Jan 2009
Location: Valley Forge, PA, USA
Device: Kindle Paperwhite
|
Quote:
Is there a quick list of the differences between the epub2 and epub3 specifications? (Maybe EPUB3 for Dummies??) Right now for things like letters, signs, telegrams, etc. I have various flavors of .blockquote so it'd be nice if I could simplify my CSS with things like <atricle. and <aside> |
|
11-09-2020, 05:43 PM | #14 | |
Bibliophagist
Posts: 36,424
Karma: 145748708
Join Date: Jul 2010
Location: Vancouver
Device: Kobo Sage, Libra Colour, Lenovo M8 FHD, Paperwhite 4, Tolino epos
|
Quote:
The problem for me is that when I work on other people's ebooks, I have to keep almost everything to the lowest common denominator. If I use an epub3 only feature, I have to make sure that it looks good on epub2, epub3, azw3 and (blechh...) even mobi. KISS is the mantra. |
|
11-09-2020, 07:13 PM | #15 | |
Guru
Posts: 945
Karma: 1183425
Join Date: Dec 2016
Location: Goiânia - Brazil
Device: iPad, Kindle Paperwhite
|
Yeas, it does.
Quote:
Basically: - Added HTML5 support - SVG documents can now appear in the spine in EPUB 3 - Support for MathML - Navigation improved (drops NCX and adopts XHTML) - Scripting - Added modules from CSS3 - Embedded Audio and video - Media overlays Other features were introduced, then dropped later (its Epub 3.2, now). Some of then were never implemented by any reading system. There are also some other features, but not very outstanding. |
|
|
Similar Threads | ||||
Thread | Thread Starter | Forum | Replies | Last Post |
css question | ralphiedee | Sigil | 74 | 12-23-2012 06:29 AM |
CSS Question | jackibar | Sigil | 24 | 03-01-2012 09:12 AM |
CSS question | crutledge | Workshop | 17 | 12-17-2011 07:52 AM |
CSS Question | AppleTard | Calibre | 1 | 06-12-2011 12:07 AM |
Question for the CSS experts | crutledge | Sigil | 8 | 06-10-2011 04:13 PM |