CSS Question

phossler · 11-09-2020, 12:21 PM

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:

DNSB · 11-09-2020, 12:28 PM

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.

thiago.eec · 11-09-2020, 12:48 PM

Quote:

Originally Posted by phossler

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?

I was sure using !important would do the trick, but it doesn't.
So, here is another way:

Code:

p {
  text-indent: 2em;
}
.noindent p {
  text-indent: 0em;
}

DNSB · 11-09-2020, 01:35 PM

Quote:

Originally Posted by thiago.eec

I was sure using !important would do the trick, but it doesn't.
So, here is another way:

Code:

p {
  text-indent: 2em;
}
.noindent p {
  text-indent: 0em;
}

One problem with using that solution is that it does not seem to allow using <p class="noindent"> to not indent a single paragraph. I've attached a sample image from calibre's ebook-viewer where the last two paragraphs should not have an indent.

Spoiler:

thiago.eec · 11-09-2020, 01:51 PM

Quote:

Originally Posted by DNSB

One problem with using that solution is that it does not seem to allow using <p class="noindent"> to not indent a single paragraph. I've attached a sample image from calibre's ebook-viewer where the last two paragraphs should not have an indent.

That was just an example for the specific code shared by the OP. But to address your case either, you can just ADD my suggestion to the original CSS:

Code:

p {
  text-indent: 2em;
}
.noindent {
  text-indent: 0em;
}
.noindent p {
  text-indent: 0em
}

See that a more specific rule takes precedence over the general one.

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
}

If you want just the first instance of <p> to have that style, then use the '+' sign. This is good for styling first paragraphs without using classes, or for a drop cap (alongside with pseudo-selector 'first-letter'):

Code:

h1 + p {
  text-indent: 0em
}

phossler · 11-09-2020, 03:05 PM

@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

hobnail · 11-09-2020, 03:13 PM

A somewhat confusing way you could do it is to say

Code:

p { text-indent: 0; }
p + p { text-indent: 2em; }

Which says (confusingly) paragraphs by default have no indent, but paragraphs following a paragraph (which are the majority) are indented. So the first one ends up handling paragraphs after h, blockquote, etc. tags.

Clever, but as I said, confusing.

thiago.eec · 11-09-2020, 03:45 PM

Quote:

Originally Posted by hobnail

A somewhat confusing way you could do it is to say

Code:

p { text-indent: 0; }
p + p { text-indent: 2em; }

Which says (confusingly) paragraphs by default have no indent, but paragraphs following a paragraph (which are the majority) are indented. So the first one ends up handling paragraphs after h, blockquote, etc. tags.

Clever, but as I said, confusing.

That won't do it. He wants to style a BLOCK of paragraphs. What you suggested only works for a single paragraph following a different element other then <p>.

hobnail · 11-09-2020, 04:26 PM

Quote:

Originally Posted by thiago.eec

That won't do it. He wants to style a BLOCK of paragraphs. What you suggested only works for a single paragraph following a different element other then <p>.

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.

hobnail · 11-09-2020, 04:44 PM

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%;
}

Then for the specific type things like

Code:

div.article {
    font-family: sans-serif;
}
div.letter p {
    font-style: italic;
    hyphens: none;
}

And to use it it's

Code:

<div class="block letter"><p>blah</p><p>blah</p></div>

As a side note I don't understand (or have forgotten) why the div.article doesn't need the space p while the div.letter does. E.g., if you do

Code:

<div class="article block">First article sentence.</div>
<div class="letter block">First letter sentence.</div>

The article sentence is sans serif but the letter sentence is not italic.

DNSB · 11-09-2020, 05:08 PM

Quote:

Originally Posted by hobnail

Then for the specific type things like

Code:

div.article {
    font-family: sans-serif;
}
div.letter p {
    font-style: italic;
    hyphens: none;
}

And to use it it's

Code:

<div class="block letter"><p>blah</p><p>blah</p></div>

As a side note I don't understand (or have forgotten) why the div.article doesn't need the space p while the div.letter does. E.g., if you do

Code:

<div class="article block">First article sentence.</div>
<div class="letter block">First letter sentence.</div>

The article sentence is sans serif but the letter sentence is not italic.

The letter sentence requires a p tag for the "div.letter p" to apply -- it applies to p elements inside a div element.

thiago.eec · 11-09-2020, 05:19 PM

Quote:

Originally Posted by hobnail

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

If using HTML5 (Epub3), you can use <aside> and <article> for those.

phossler · 11-09-2020, 05:42 PM

Quote:

Originally Posted by thiago.eec

If using HTML5 (Epub3), you can use <aside> and <article> for those.

Does the Calibre editor support epub3?

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>

DNSB · 11-09-2020, 06:43 PM

Quote:

Originally Posted by phossler

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>

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.

thiago.eec · 11-09-2020, 08:13 PM

Quote:

Originally Posted by phossler

Does the Calibre editor support epub3?

Yeas, it does.

Quote:

Originally Posted by phossler

Is there a quick list of the differences between the epub2 and epub3 specifications? (Maybe EPUB3 for Dummies??)

http://idpf.org/epub/30/spec/epub30-changes.html

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.

11-09-2020, 12:21 PM	#1
phossler Wizard Posts: 1,090 Karma: 447222 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: @charset "utf-8"; /* Styles for Test_CSS / p { text-indent: 2em; } .noindent { text-indent: 0em; } and Spoiler*: <?xml version='1.0' encoding='utf-8'?> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <title>Test_CSS</title> <link rel="stylesheet" type="text/css" href="styles.css"/> </head> <body> <h1>Test_CSS</h1> <p>Some indented text </p> <p>Some indented text </p> <p>Some indented text </p> <div class = "noindent"> <p>Some not indented text </p> <p>Some not indented text </p> <p>Some not indented text </p> </div> </body> </html>

11-09-2020, 03:13 PM	#7
hobnail Running with scissors Posts: 1,592 Karma: 14328510 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; } Which says (confusingly) paragraphs by default have no indent, but paragraphs following a paragraph (which are the majority) are indented. So the first one ends up handling paragraphs after h, blockquote, etc. tags. Clever, but as I said, confusing.

11-09-2020, 04:44 PM	#10
hobnail Running with scissors Posts: 1,592 Karma: 14328510 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%; } Then for the specific type things like Code: div.article { font-family: sans-serif; } div.letter p { font-style: italic; hyphens: none; } And to use it it's Code: <div class="block letter"><p>blah</p><p>blah</p></div> As a side note I don't understand (or have forgotten) why the div.article doesn't need the space p while the div.letter does. E.g., if you do Code: <div class="article block">First article sentence.</div> <div class="letter block">First letter sentence.</div> The article sentence is sans serif but the letter sentence is not italic.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
css question	ralphiedee	Sigil	74	12-23-2012 07:29 AM
CSS Question	jackibar	Sigil	24	03-01-2012 10:12 AM
CSS question	crutledge	Workshop	17	12-17-2011 08:52 AM
CSS Question	AppleTard	Calibre	1	06-12-2011 01:07 AM
Question for the CSS experts	crutledge	Sigil	8	06-10-2011 05:13 PM

11-09-2020, 12:28 PM	#2
DNSB Bibliophagist Posts: 48,175 Karma: 174315444 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.

11-09-2020, 03:05 PM	#6
phossler Wizard Posts: 1,090 Karma: 447222 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

Advert

Advert