Indent, Margin or other?

[Woodssi]

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.

[Karellen]

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

[Woodssi]

Ahh, I see.
I wasn't familiar with that (as I'm just a casual editor, for my own preferences).

Thanks for the pointer.

[Turtle91]

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:

@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:

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

[DiapDealer]

Originally Posted by Woodssi

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.

[JSWolf]

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.

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

[theducks]

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