Register Guidelines E-Books Today's Posts Search

Go Back   MobileRead Forums > E-Book Software > Sigil

Notices

Reply
 
Thread Tools Search this Thread
Old 07-27-2022, 03:48 AM   #1
Woodssi
Enthusiast
Woodssi began at the beginning.
 
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.
Woodssi is offline   Reply With Quote
Old 07-27-2022, 04:32 AM   #2
Karellen
Wizard
Karellen ought to be getting tired of karma fortunes by now.Karellen ought to be getting tired of karma fortunes by now.Karellen ought to be getting tired of karma fortunes by now.Karellen ought to be getting tired of karma fortunes by now.Karellen ought to be getting tired of karma fortunes by now.Karellen ought to be getting tired of karma fortunes by now.Karellen ought to be getting tired of karma fortunes by now.Karellen ought to be getting tired of karma fortunes by now.Karellen ought to be getting tired of karma fortunes by now.Karellen ought to be getting tired of karma fortunes by now.Karellen ought to be getting tired of karma fortunes by now.
 
Karellen's Avatar
 
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
Karellen is offline   Reply With Quote
Advert
Old 07-27-2022, 06:13 AM   #3
Woodssi
Enthusiast
Woodssi began at the beginning.
 
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.
Woodssi is offline   Reply With Quote
Old 07-27-2022, 07:13 AM   #4
Turtle91
A Hairy Wizard
Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.
 
Turtle91's Avatar
 
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;
}
HTML:
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.
Attached Thumbnails
Click image for larger version

Name:	Screenshot 2022-07-27 071823.png
Views:	165
Size:	300.2 KB
ID:	195343  

Last edited by Turtle91; 07-27-2022 at 07:19 AM.
Turtle91 is online now   Reply With Quote
Old 07-27-2022, 09:21 AM   #5
DiapDealer
Grand Sorcerer
DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.
 
DiapDealer's Avatar
 
Posts: 28,554
Karma: 204127028
Join Date: Jan 2010
Device: Nexus 7, Kindle Fire HD
Quote:
Originally Posted by Woodssi View Post
I also tried margin-left: 1em , but this also doesn't seem to be correct.
This should work. Either there was a syntax issue, or something else was taking precedent.
DiapDealer is offline   Reply With Quote
Advert
Old 07-27-2022, 02:22 PM   #6
JSWolf
Resident Curmudgeon
JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.
 
JSWolf's Avatar
 
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.
JSWolf is online now   Reply With Quote
Old 07-27-2022, 05:14 PM   #7
theducks
Well trained by Cats
theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.
 
theducks's Avatar
 
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 hand written=cursive, old-Computer output:monospaced or OCR...)
theducks is offline   Reply With Quote
Reply


Forum Jump

Similar Threads
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


All times are GMT -4. The time now is 08:59 AM.


MobileRead.com is a privately owned, operated and funded community.