'epub Change Block of Text Background Color
Apologies. I am brand new to this and can't seem to find the right resources.
I've written a novel and am trying to set up the ebook in epub format from HTML. Large sections of the book are text exchanges between two characters and I want it to appear similarly to how it would appear on a phone with outgoing messages being a darker colored bubble and right justified and incoming messages being a lighter colored bubble and left justified.
The html is working just fine and is provided below. I am using Sigil and the previewer on Sigil looks just fine. But when I generate the epub file and try to read it with any reader on my phone, it's a mess.
I understand that not all CSS are recognized in epub, but I can't find a comprehensive list of what is and is not supported. I could possibly live with just having a border around the text to indicate that it's a text message (although that is not preferred).
If anyone can help me make a block of text appear in a different colored bubble, I would be eternally grateful.
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: white;}
standard {display: block;
text-indent: 1.5em;
widows: 2;
orphans: 2;
margin-left:0;
margin-right:0;
margin-top:0.5em;
margin-bottom:0;
text-align: justify;
line-height: 135%;
font-family:"Arial";}
chaptertitle {display: block;
text-indent: 0;
text-align: center;
margin: 75px 0 0 0;
font-size: 2.0em;
font-weight: bold;
page-break-before: always;
line-height: 150%;}
chaptersub {display: block;
text-indent: 0;
text-align: center;
margin: 0 0 100px 0;
font-size: 1.5em;
font-weight: bold;
line-height: 135%;}
textto {display: block;
text-align: right;
position:relative;
padding-top:.25em;
padding-bottom:.25em;
padding-left:.75em;
padding-right:.75em;
margin-top:.5em;
margin-bottom: .5em;
margin-left:30%;
margin-right:10%;
background:rgb(255, 99, 71);
\-webkit-border-radius:1em;
color: white;}
textfrom {display: block;
text-align: left;
position:relative;
padding-top:.25em;
padding-bottom:.25em;
padding-left:.75em;
padding-right:.75em;
margin-top:.5em;
margin-bottom: .5em ;
margin-left:10%;
margin-right:30%;
width: auto;
background:lightgray;
\-webkit-border-radius:1em;
color: black;}
</style>
</head>
<body>
<chaptertitle>Chapter One</chaptertitle>
<chaptersub>Friday Morning</chaptersub>
<standard>This is a standard block of text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ornare, turpis eu euismod accumsan, dolor ipsum vehicula arcu, varius ornare lorem mi non purus. Donec lorem augue, varius et nibh aliquam, pulvinar rutrum quam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum finibus fringilla diam, at eleifend nisi aliquam ac. Aenean quis consectetur elit, ac hendrerit quam. Pellentesque tristique, tellus vitae pharetra accumsan, tortor libero eleifend ante, vitae egestas dolor dui ut ante. Aenean lobortis eros ornare, hendrerit leo vitae, pretium est. Praesent eleifend eget dolor sit amet auctor. Donec luctus nisi vitae facilisis malesuada. Pellentesque tristique venenatis metus quis tincidunt. Ut neque massa, bibendum nec efficitur eu, dignissim sed arcu. Nulla euismod scelerisque mollis. Suspendisse a arcu vitae velit dignissim laoreet non quis urna. Suspendisse ac posuere ex.</standard>
<textto>Hey there. What's up?</textto>
<textfrom>Nothing much. You?</textfrom>
<textto>Just seeing what you're doing.</textto>
<textto>This is a long text. Suspendisse vel iaculis dui, et auctor lorem. Vestibulum efficitur justo quis porttitor mattis. Sed lectus augue, dictum pharetra diam ut, iaculis rhoncus libero. Mauris sit amet faucibus massa. Sed nisl nibh, pretium at commodo eget, interdum et ante. Integer vel pellentesque augue. Nullam ut massa magna.</textto>
<textto>So, what do you think?</textto>
<textfrom>That is a lot to read.</textfrom>
<textto>Yeah</textto>
<textfrom>This is my response. Mauris sit amet faucibus massa. Sed nisl nibh, pretium at commodo eget, interdum et ante. Integer vel pellentesque augue. Nullam ut massa magna.</textfrom>
<textto>Thanks.</textto>
<textto>So are you up for it?</textto>
<textto>Or later</textto>
<textfrom>We will see. Bye.</textfrom>
<standard>This is a standard block of text. Morbi sagittis feugiat ligula, vel sodales orci convallis ac. Duis sit amet velit condimentum, placerat augue pulvinar, viverra metus. Nulla vulputate gravida mauris, ut fringilla dui dapibus eu. Maecenas massa sapien, commodo finibus mi a, dignissim aliquet dolor. Donec aliquet efficitur ante vitae facilisis. Quisque semper sodales urna consequat dignissim. Vestibulum non orci bibendum, maximus libero nec, mollis urna. Proin congue iaculis sem in faucibus. Integer ornare mi in mauris cursus sodales. Nullam nisi metus, malesuada ut ligula et, pharetra varius tortor. Praesent vestibulum, lorem fringilla congue laoreet, mauris eros scelerisque lacus, nec euismod eros mi a augue. Mauris at volutpat tortor.</standard>
<chaptertitle>Chapter Two</chaptertitle>
<chaptersub>Friday Evening</chaptersub>
<standard>This is a standard block of text. Morbi sagittis feugiat ligula, vel sodales orci convallis ac. Duis sit amet velit condimentum, placerat augue pulvinar, viverra metus. Nulla vulputate gravida mauris, ut fringilla dui dapibus eu. Maecenas massa sapien, commodo finibus mi a, dignissim aliquet dolor. Donec aliquet efficitur ante vitae facilisis. Quisque semper sodales urna consequat dignissim. Vestibulum non orci bibendum, maximus libero nec, mollis urna. Proin congue iaculis sem in faucibus. Integer ornare mi in mauris cursus sodales. Nullam nisi metus, malesuada ut ligula et, pharetra varius tortor. Praesent vestibulum, lorem fringilla congue laoreet, mauris eros scelerisque lacus, nec euismod eros mi a augue. Mauris at volutpat tortor.</standard>
</body>
</html>
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|