Here is the code and the css.
This is a kids books. As you can see, I currently have 3% indent on <s1> just to move things over a bit. If someone decides to view with larger font because it is a kids book, some sentences will flow onto the next line. I want that overflow to indent a bit extra so it is easy for a young reader to see that it is a continuation of the line above. With my current set-up of code and css, what is the easiest way to do it? I realize the CSS is absurd, but that is what Pages spit out for me to use.
sup{
font-size: 67%;
vertical-align: 33%;
}
sub{
font-size: 67%;
vertical-align: -10%;
}
p{
margin: 0px;
}
.s1{
color: #000000;
font-size: 100.00%;
font-style: normal;
font-variant: normal;
font-weight: normal;
letter-spacing: 0.0000em;
margin-bottom: 0.0000%;
margin-top: 0.0000%;
padding-left: 0.0000%;
padding-right: 0.0000%;
text-align: left;
text-decoration: none;
text-indent: 3.0000%;
text-transform: none;
}
.s2{
color: #000000;
font-size: 125.00%;
font-style: normal;
font-variant: normal;
font-weight: bold;
letter-spacing: 0.0000em;
margin-bottom: 0.0000%;
margin-top: 0.0000%;
padding-left: 0.0000%;
padding-right: 0.0000%;
text-align: center;
text-decoration: none;
text-indent: 0.0000%;
text-transform: none;
}
s3{
color: #000000;
font-size: 100.00%;
font-style: normal;
font-variant: normal;
font-weight: normal;
letter-spacing: 0.0000em;
margin-bottom: 0.0000%;
margin-top: 0.0000%;
padding-left: 0.0000%;
padding-right: 0.0000%;
text-align: left;
text-decoration: none;
text-indent: 0.0000%;
text-transform: none;
}
body, div, p, h1, h2, h3, h4 { margin: 0; padding: 0; }
As well as the code
<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>1 Section 1 | Misericordia Readers Pre-Primer</title>
<meta content="BDA4F8FE-D078-4656-AE52-1A2D4DFB64C3" name="EPB-UUID" />
<link href="../Styles/book.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="body" style="white-space:normal">
<h1 style="text-align: center;" title="Little Ned"><img alt="Misericordia Readers Pre-Primer_Page_06" src="../Images/Misericordia%20Readers%20Pre-Primer_Page_06.jpeg" /></h1>
<p class="s2">Little Ned</p>
<p class="s1">Wake up, little Ned.</p>
<p class="s1">Wake up.</p>
<p class="s1">Wake up.</p>
<p class="s1">Little Ned wakes up.</p>
<p class="s3" style="text-align: center;"><img alt="Misericordia Readers Pre-Primer_Page_07" src="../Images/Misericordia%20Readers%20Pre-Primer_Page_07.jpeg" /></p>
<p class="s1">Ned called, “Mother, Mother!</p>
<p class="s1">Come up, Mother.”</p>
</div>
</body>
</html>