![]() |
#1 |
Enthusiast
![]() Posts: 45
Karma: 10
Join Date: Sep 2011
Location: Barrhead, Scotland
Device: Kindle Paperwhite (2)
|
Indent, Margin or other?
Hello Helpers,
I'm editing a book presently (purely for my own OCD purposes...) which has the main character read a letter within one of the chapters. In order to differentiate the letter (again, purely my choice) I was looking to indent the text by 1em. The letter runs over two paragraphs, about 10 lines of text in each. I use <p class="Letter"> in the main, as opposed to <p class="Text"> for all the other lines. In the css, when I use text-indent: 1em this only seems to affect the FIRST line, and none of the remaining... I also tried margin-left: 1em , but this also doesn't seem to be correct. Can anyone advise what correct, or the most effective way to do this would be? Much obliged, as per usual. |
![]() |
![]() |
![]() |
#2 |
Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 1,611
Karma: 9500498
Join Date: Sep 2021
Location: Australia
Device: Kobo Libra 2
|
I would wrap the letter in <blockquote>
<blockquote> <p class="noindent">Dear whoever</p> <p>Some text here</p> </blockquote> You can then either define the blockquote in css, or just allow the ereader to style it with its default. My blockquote css is... blockquote { margin-left: 5%; margin-right: 5%; } https://developer.mozilla.org/en-US/...ent/blockquote |
![]() |
![]() |
Advert | |
|
![]() |
#3 |
Enthusiast
![]() Posts: 45
Karma: 10
Join Date: Sep 2011
Location: Barrhead, Scotland
Device: Kindle Paperwhite (2)
|
Ahh, I see.
I wasn't familiar with that (as I'm just a casual editor, for my own preferences). Thanks for the pointer. |
![]() |
![]() |
![]() |
#4 |
A Hairy Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 3,346
Karma: 20171571
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone 15/11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire
|
There are multiple tags you could use for that, blockquote or div are two and you can set the styling in your css to make either one look exactly the same. The only real difference is semantics... is the section a long quote where you might have some kind of citation of the author, or is it a section of text that you want to show differently? The first would use the blockquote, pretty much everything else would use a div...unless it was something specific like a list.
When I am presenting something as a "letter", which would typically be hand-written, I get a little fancy and change the font as well - embedding a "Monotype Corsiva" font to the ePub. Some devices don't do well with embedded fonts so make sure you have some kind of fall-back: CSS: Code:
@font-face { font-family: 'Monotype Corsiva'; font-weight: normal; font-style: italic; src: url('../Fonts/MTCORSVA.TTF'); } div.letter { margin: 2em 0 2em 1em; } div.letter p { font-size: 0.85em; font-family: "Monotype Corsiva", "cursive", serif; font-style: italic; text-indent: 0; margin-top: .75em; } div.letter p.signature { text-align: right; margin-right: 1em; } Code:
<p>Some normal paragraph.</p> <p>Some normal paragraph.</p> <p>Some normal paragraph.</p> <div class="letter"> <p>A paragraph in the letter.</p> <p>A paragraph in the letter.</p> <p>A paragraph in the letter.</p> <p class="signature">Respectfully,<br/>Dion</p> </div> <p>Some normal paragraph.</p> <p>Some normal paragraph.</p> <p>Some normal paragraph.</p> Obviously you can style the letter however you wish... I would, however, also recommend NOT using <p class="text"> for all your normal paragraphs... simply use the bare <p> tag (with styling in your css like: p {yadda yadda} )...then when you use a class for those special paragraphs it makes it stand out a little more...and it keeps your html nice and clean. Last edited by Turtle91; 07-27-2022 at 07:19 AM. |
![]() |
![]() |
![]() |
#5 |
Grand Sorcerer
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 28,554
Karma: 204127028
Join Date: Jan 2010
Device: Nexus 7, Kindle Fire HD
|
|
![]() |
![]() |
Advert | |
|
![]() |
#6 |
Resident Curmudgeon
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 79,683
Karma: 145864619
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
Here is the CSS code I use for blockquotes. There's one thing that's missed out and that is the bottom margin at the end of the chapter/section. I have the class so if the blockquote ends the chapter/section. The class .blockquote defines a bottom margin of 0. Also, I have my text indent set to 1.2em. For offset text, overall, I prefer using blockquote then I would a <div>.
This is the code I add to an eBook and use as needed. <hr/> is for section breaks. It gives a 20% line. img prevents the images from going off the screen. p is for most paragraphs with an indent. cover is for full screen images. <div class="cover"><img alt="" class="cover" src="../images/cover.jpg></div>. And body sets widows and orphans to 1 and sets no margins. Fell free to use any of my CSS. Code:
blockquote { margin-top: 1em; margin-right: 1.5em; margin-bottom: 1em; margin-left: 1.5em; } body { widows: 1; orphans: 1; margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; text-align: justify; } hr { margin-top: 0.9em; margin-right: 40%; margin-bottom: 0.9em; margin-left: 40%; border-top: 2px solid; } img { max-height: 100%; max-width: 100%; } p { margin-top: 0; margin-bottom: 0; text-indent: 1.2em; } .blockquote { margin-top: 1em; margin-right: 1.5em; margin-bottom: 0; margin-left: 1.5em; } .cover { text-align: center; text-indent: 0; height: 100%; } Last edited by JSWolf; 07-27-2022 at 02:28 PM. |
![]() |
![]() |
![]() |
#7 |
Well trained by Cats
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 31,031
Karma: 60358908
Join Date: Aug 2009
Location: The Central Coast of California
Device: Kobo Libra2,Kobo Aura2v1, K4NT(Fixed: New Bat.), Galaxy Tab A
|
I'm a Blockquote fan. IIRC BQ has margins on both edges; try it before you try and modify those.
For letters, I sometimes specify a different font-family depending on the flavor of letter/note (IMHO books need not be boring visually ![]() |
![]() |
![]() |
![]() |
|
![]() |
||||
Thread | Thread Starter | Forum | Replies | Last Post |
Top-margin (bottom-margin?) for Kobo? | Notjohn | Sigil | 14 | 02-28-2015 06:43 AM |
Bug converting html css text-indent and left-margin | bhoyt | Conversion | 15 | 01-24-2014 07:28 PM |
CSS margin instead of margin-top, etc. | icallaci | Conversion | 24 | 10-19-2013 09:52 AM |
Reducing left-margin indent | Siavahda | ePub | 1 | 02-10-2013 12:40 PM |
calibre ignore margin-top and margin-bottom | bender | Calibre | 2 | 12-11-2009 06:58 AM |