View Single Post
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,355
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 offline   Reply With Quote