03-19-2013, 08:23 AM | #1 |
Zealot
Posts: 104
Karma: 22
Join Date: Jun 2010
Device: none
|
Help with css formatting - first line indent
Hello,
The stylesheet I'm using indents the first line of every paragraph - which is great. However, I want the first line of each chapter and after section dividers NOT to indent. I can't do it by simply backspacing, so can anyone help with a css code that would help me do that? Thanks! |
03-19-2013, 08:44 AM | #2 |
A Hairy Wizard
Posts: 3,093
Karma: 18727053
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone 11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire
|
You can either give each paragraph a special class with appropriate formatting, or use a little more technical CSS styling and it will do it automatically.
Code:
.noind {text-indent:0} <p class="noind">This is a no indent paragraph.</p> Code:
.sectionbreak {margin:2em auto; text-align:center} h2 + p, p.sectionbreak + p {text-indent:0} or a paragraph defined as a section break, will have an indent of 0 As in: <h2>Chapter 69</h2> <p>This is a no indent paragraph.</p> <p class="sectionbreak">* * *</p> <p>This is a no indent paragraph.</p> I hope that helps! Cheers, |
03-19-2013, 08:44 AM | #3 |
Guru
Posts: 718
Karma: 1085610
Join Date: Mar 2009
Location: Bristol, England
Device: PRS-T1, 1825PT, Galaxy Tab, One X, TF700T, Aura HD, Nexus 7
|
I normally use soothing like this:
Code:
<p class="newscene1">blah, blah, blah.</p> <p>blah, blah, blah.</p> <p>blah, blah, blah.</p> Code:
p {text-indent:1em; margin:0;} .newscene1 {text-indent:0; margin-top:1em;} Last edited by ghostyjack; 03-19-2013 at 08:47 AM. |
03-19-2013, 08:48 AM | #4 |
Guru
Posts: 718
Karma: 1085610
Join Date: Mar 2009
Location: Bristol, England
Device: PRS-T1, 1825PT, Galaxy Tab, One X, TF700T, Aura HD, Nexus 7
|
You beat me to it!
Both approaches work, just depends on what you prefer. For the start of chapters, I tend to add another "newscene" entry I call "newscene2", this one had margin-top set to 2em instead of 1em. Thus providing a bit more gap to the chapter heading. |
03-19-2013, 09:07 AM | #5 |
A Hairy Wizard
Posts: 3,093
Karma: 18727053
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone 11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire
|
That thar is called "ninja typing skills"!!
|
03-19-2013, 09:42 AM | #6 |
Zealot
Posts: 104
Karma: 22
Join Date: Jun 2010
Device: none
|
Thanks you guys!
@Turtle91 - I presume your second code works just as well if I call it h1 instead of h2? @ghostyjack - to make yours work, you would have to manually go into the code and assign each paragraph the "newscene" marker, no? Also, is there a quick way to assign a class to a section break? ps - This is such a great forum. |
03-19-2013, 09:55 AM | #7 | |
Well trained by Cats
Posts: 29,775
Karma: 54401244
Join Date: Aug 2009
Location: The Central Coast of California
Device: Kobo Libra2,Kobo Aura2v1, K4NT(Fixed: New Bat.), Galaxy Tab A
|
Quote:
Search and Replace: REGEX (a Normal mode might have problem because of the Stars) Code:
<p>\*\s*\*\s*\*</p> <p class="sectionbreak">* * *</p> The REAL stars need to be escaped on search ONLY as they are special characters |
|
03-19-2013, 01:44 PM | #8 |
Guru
Posts: 718
Karma: 1085610
Join Date: Mar 2009
Location: Bristol, England
Device: PRS-T1, 1825PT, Galaxy Tab, One X, TF700T, Aura HD, Nexus 7
|
The standard paragraph tag will always be indented with the code I showed above, so you only need to add the "newscene" classes when you want to have the paragraph behave differently.
|
03-19-2013, 06:09 PM | #9 |
Zealot
Posts: 104
Karma: 22
Join Date: Jun 2010
Device: none
|
Absolutely awesome. I now have it just the way I wanted. Thanks so much.
|
03-20-2013, 09:46 AM | #10 |
Wizard
Posts: 1,071
Karma: 412718
Join Date: Jan 2009
Location: Valley Forge, PA, USA
Device: Kindle Paperwhite
|
@Turtle91 -- I didn't know you could do that in CSS
Code:
.sectionbreak {margin:2em auto; text-align:center} h2 + p, p.sectionbreak + p {text-indent:0} Paul |
03-20-2013, 10:21 AM | #11 |
Guru
Posts: 696
Karma: 150000
Join Date: Feb 2010
Device: none
|
Kind of off topic for this forum, but keep in mind that some of these CSS constructs may not translate well to Kindle format via kindlegen (IIRC).
|
03-22-2013, 05:24 AM | #12 |
Zealot
Posts: 104
Karma: 22
Join Date: Jun 2010
Device: none
|
I did find that when trying to upload an ePub to the KDP platform. The workaround was to convert it first to .mobi using Calibre, then uploading again. That worked like a charm.
|
Tags |
first line indent, no indent |
Thread Tools | Search this Thread |
|
Similar Threads | ||||
Thread | Thread Starter | Forum | Replies | Last Post |
New Mobi files and Kindle's first line indent | eggheadbooks1 | Kindle Formats | 7 | 06-16-2011 08:21 PM |
CSS override working for font, not dd indent | FlaSheridn | Calibre | 3 | 10-31-2010 03:06 PM |
Specify indent in css, not with   | James_Wilde | Calibre | 7 | 09-13-2010 09:48 PM |
CSS wacky p indent post-chapter split? | Hitch | Sigil | 0 | 06-17-2010 08:59 PM |
First Line indent for Mobi conversion | tbergman | Calibre | 7 | 09-06-2009 09:09 AM |