At the heart of an EPUB lies Cascading Style Sheets (CSS) and Extensible HyperText Markup Language (XHTML). This grants the designer control over the look and feel of their eBooks, even in an environment where the reader can affect change at will.
Designers can implement CSS styles that creates realistic Text message conversations. These elements reflow automatically, maintaining a consistent look and feel across devices.
The Details
To begin, add the following CSS style to your EPUB‘s stylesheet. This document is normally named stylesheet.css in Calibre generated eBooks.
Style
.smsMine {
display: block;
border-radius: 0.75em 0.75em 0 0.75em;
border: 0.05em solid;
padding: 0.5em;
margin-left: 40%;
margin-right: 5%;
margin-bottom: 1em;
text-align: left;
}
.smsThem {
display: block;
border-radius: 0.75em 0.75em 0.75em 0;
border: 0.05em solid;
padding: 0.5em;
margin-left: 5%;
margin-right: 40%;
margin-bottom: 1em;
text-align: left;
}
These styles are needed to create the effect. While both are similar there are two key differences:
- Where they align. Texts from the character’s point of view (smsMine) are on the right, where they appear on most applications; and
- Where the sharp corner appears. The sharp corner is at the lower right (smsMine) or left (smsThem) depending on the point of view.
I opted to use smsMine and smsThem for the style names. However, their names can be easily changed prior to implementation.
Since these styles use em, they adjust automatically to changes in font, font-sizes, and zoom. Margins are specified in percentages to remain consistent as the view changes.
All you need to do is define the appropriate class to the paragraph. Calibre will update the preview to display the new look and feel.
Code
<p>Evelyn realised what was going on.</p>
<p>“Is everything alright?” Evelyn asked.</p>
<p class="smsThem">Elizabeth: F***! My <img class="imageEmoji"
alt="[Pile of poo emoji]" src="Emoji_Pile_of_Poo.svg">
boss forgot to mention that I’d be stuck here past midnight!
<img class="imageEmoji" alt="Face with symbols on mouth
emoji" src="Emoji_Face_with_Symbols_on_Mouth.svg"></p>
<p class="smsMine">Clara: What? How? <img class="imageEmoji"
alt="[Crying face emoji]" src="Emoji_Crying_Face.svg"></p>
<p class="smsThem">Elizabeth: Dunno. So, don’t wait up for
me…</p>
<p class="smsMine">Clara: Are you sure you don’t want me to be
there when you get off work? <img class="imageEmoji"
alt="[Face blowing a kiss emoji]"
src="Emoji_Face_Blowing_a_Kiss.svg"></p>
<p class="smsThem">Elizabeth: Positive. Just be happy that
you’re not in the <img class="imageEmoji" alt="Dog face
emoji" src="Emoji_Dog_Face.svg"> <limg class="imageEmoji"
alt="[House emoji]" src="Emoji_House.svg"> tonight! Gotta
get back to work. <img class="imageEmoji" alt="[Face
screaming in fear emoji]"
src="Emoji_Face_Screaming_in_Fear.svg"></p>
<p>“Oh… just peachy,” Clara lied. “Why do you ask?”</p>
Example

That’s it!
Realistic Text Messaging in EPUB by Evelyn Chartres is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
Leave a Reply