formatting question when line overflows

rosshalde · 11-21-2014, 01:12 PM

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>

odedta · 11-21-2014, 01:31 PM

There are so many things wrong with your code... ugh.

First of all, start with the CSS, erase all styles and start putting them back one by one, from most essential until you get the desired result, then ditch the rest.
For any kind of unit, don't use more than 1 digit after the decimal point, meaning 0.0 is ok, 0.00 is not.
Then again, there is absolutely no need for that level of precision so I would about using the decimal point.

Now the HTML:
Don't put an image inside of a heading tag

Quote:

There is absolutely no reason to use a div with class body since you have a body tag and you can apply css directly to it. also, white-space is one of those css rules you should throw in the bin.
AFAIK, there is no need for the title attribute, since we can't hover with our mouse pointer then we won't be able to see the title anyway.

I think this code should work well for you:

Code:

<body>

    <div style="text-align:center;">

       <img alt="Misericordia Readers Pre-Primer_Page_06" src="../Images/1.png"/>

       <h1>Little Ned</h1>

    </div>

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

    <div style="text-align: center;">

      <img alt="Misericordia Readers Pre-Primer_Page_07" src="../Images/2.png"/>

    </div>

    <p class="s1">Ned called, “Mother, Mother!</p>

    <p class="s1">Come up, Mother.”</p>


</body>

Code:

body, div, p, h1, h2, h3, h4 {
  margin: 0;
  padding: 0;
}
.s1 {
  font-size: 1em;
  text-indent: 15px;
  line-height: 1.2;
}

EDIT: I changed the actual images to see what happens, so change back to your images.

theducks · 11-22-2014, 02:49 PM

I have seen the (IMHO very ugly) practice of a huge, monolith of a file where ther is only 1 <body>, hence styling that doesn't not always produce the results for the 'bodies' (aka a Chapter) of the text.

They are faking a 'body' tag
File per chapter/Section eliminates the need to fake it

odedta · 11-22-2014, 02:57 PM

Quote:

Originally Posted by theducks

I have seen the (IMHO very ugly) practice of a huge, monolith of a file where ther is only 1 <body>, hence styling that doesn't not always produce the results for the 'bodies' (aka a Chapter) of the text.

They are faking a 'body' tag
File per chapter/Section eliminates the need to fake it

Yeah, though this looks like it's machine-generated code.

theducks · 11-22-2014, 03:26 PM

Quote:

Originally Posted by odedta

Yeah, though this looks like it's machine-generated code.

The Borg do e-books

signum · 11-22-2014, 06:26 PM

Quote:

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.

Correct me if I'm wrong, but it looks like you're asking how to do a reverse, or hanging, indent. In .s1, set margin-left to be 3 percent and text-indent to -3 percent. The text-indent only applies to the first line of a displayed paragraph and it's OK to use negative values. It's a little different way of looking at the problem. Instead of adding extra indentation to long lines, establish that indentation as the default and adjust the first line. If it's short enough, you'll not see any special effect.

Jellby · 11-23-2014, 04:50 AM

This is my standard poetry styling:

Code:

div.poetry {
  margin: 1em 0 1em 2em;
}
div.stanza {
  margin: 0.5em 0;
}
div.poetry div.line {
  margin: 0;
  padding-left: 5em;
  text-indent: -5em;
  text-align: left;
}
div.poetry div.indented {
  margin-left: 2em;
}

Code:

<div class="poetry">
  <div class="stanza">
    <div class="line">&lsquo;&ldquo;You are old, Father William,&rdquo; the young man said,</div>
    <div class="line indented">&ldquo;And your hair has become very white;</div>
    <div class="line">And yet you incessantly stand on your head&mdash;</div>
    <div class="line indented">Do you think, at your age, it is right?&rdquo;</div>
  </div>

  <div class="stanza">
  ...
  </div>
</div>

JSWolf · 11-23-2014, 07:30 PM

Remind me never to use Pages to make any sort of eBook.

rosshalde · 11-23-2014, 08:13 PM

what part of the css don't you guys like? Does it just contain too much information? Should all of the "0" quantities not be there?
someone please take the example above for "s1" and simplify it as you think it should look.

JSWolf · 11-23-2014, 08:38 PM

Quote:

Originally Posted by rosshalde

what part of the css don't you guys like? Does it just contain too much information? Should all of the "0" quantities not be there?
someone please take the example above for "s1" and simplify it as you think it should look.

.s1 is being deleted and replaced with p. The p you already have now becomes...

Code:

p {
margin-top: 2pt;
margin-bottom: 0;
margin-left: 2pt;
margin-right: 2pt;
text-align: justify;
text-indent: 1.2em
}

You don't need the <p class="s1"> all over the place. You just need <p> and only a class when you want to change <p>.

odedta · 11-24-2014, 12:48 PM

Quote:

Originally Posted by theducks

The Borg do e-books

We are the borg!

Jellby · 11-24-2014, 01:47 PM

color: #000000; (Never specify color, unless you know what you're doing. This will be invisible in "night mode")
font-size: 100.00%; (Set the font size to the current font size, how smart)
font-style: normal;
font-variant: normal;
font-weight: normal; (No need to set "normal" in all of these, this should only be used for overriding other settings)
letter-spacing: 0.0000em; (It's so common to encounter some default letter-spacing...

)
margin-bottom: 0.0000%;
margin-top: 0.0000%; (What about margin-left and margin-right?)
padding-left: 0.0000%;
padding-right: 0.0000%; (What about padding-top and padding-bottom?)
text-align: left; (Great, now I can't set it justified in my reader)
text-decoration: none; (In case someone did set the default to underlined?)
text-indent: 3.0000%;
text-transform: none; (In case someone set the defaut to uppercase?)

Besides, all those decimals are just clutter, every "0.0000xx" can be replaced with a simple "0" (no units needed for 0).

Unlike JSWolf, my preferred <p> style is:

Code:

p {
  margin: 0
  text-indent: 1.2em /* no strong preference, anything between 1em and 2em */
}

The text-align, I leave it to the renderer, and I don't want extra separation between paragraphs.

JSWolf · 11-24-2014, 01:54 PM

Quote:

Originally Posted by Jellby

Unlike JSWolf, my preferred <p> style is:

Code:

p {
  margin: 0
  text-indent: 1.2em /* no strong preference, anything between 1em and 2em */
}

My preferred <p> style is similar to yours. I only did it the way I did for this particular instance.

Quote:

The text-align, I leave it to the renderer, and I don't want extra separation between paragraphs.

The problem is that not all renderers allow you to set the justification externally. On a Kindle if there is no justification specified, it uses left justification. So yes, you should be specifying full justification otherwise, you could end up with a justification you don't want and no way to change it.

11-21-2014, 01:12 PM	#1
rosshalde Zealot Posts: 142 Karma: 10 Join Date: Jun 2014 Device: nook	formatting question when line overflows 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>

11-24-2014, 01:47 PM	#12
Jellby frumious Bandersnatch Posts: 7,548 Karma: 19500001 Join Date: Jan 2008 Location: Spaniard in Sweden Device: Cybook Orizon, Kobo Aura	color: #000000; (Never specify color, unless you know what you're doing. This will be invisible in "night mode") font-size: 100.00%; (Set the font size to the current font size, how smart) font-style: normal; font-variant: normal; font-weight: normal; (No need to set "normal" in all of these, this should only be used for overriding other settings) letter-spacing: 0.0000em; (It's so common to encounter some default letter-spacing... ) margin-bottom: 0.0000%; margin-top: 0.0000%; (What about margin-left and margin-right?) padding-left: 0.0000%; padding-right: 0.0000%; (What about padding-top and padding-bottom?) text-align: left; (Great, now I can't set it justified in my reader) text-decoration: none; (In case someone did set the default to underlined?) text-indent: 3.0000%; text-transform: none; (In case someone set the defaut to uppercase?) Besides, all those decimals are just clutter, every "0.0000xx" can be replaced with a simple "0" (no units needed for 0). Unlike JSWolf, my preferred <p> style is: Code: p { margin: 0 text-indent: 1.2em /* no strong preference, anything between 1em and 2em */ } The text-align, I leave it to the renderer, and I don't want extra separation between paragraphs.

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Help with css formatting - first line indent	Alda	Sigil	11	03-22-2013 05:24 AM
Text overflows in viewer	ender´	Library Management	4	01-17-2013 04:06 PM
Problems with Line Height Formatting	JohnnyRocks	Conversion	4	02-20-2011 07:10 AM
convert txt to epub, no new line formatting	JeanC	Calibre	10	11-23-2010 07:58 AM
line formatting formatting question	daesdaemar	Workshop	9	02-06-2009 11:47 AM

11-22-2014, 02:49 PM	#3
theducks Well trained by Cats Posts: 31,047 Karma: 60358908 Join Date: Aug 2009 Location: The Central Coast of California Device: Kobo Libra2,Kobo Aura2v1, K4NT(Fixed: New Bat.), Galaxy Tab A	I have seen the (IMHO very ugly) practice of a huge, monolith of a file where ther is only 1 <body>, hence styling that doesn't not always produce the results for the 'bodies' (aka a Chapter) of the text. They are faking a 'body' tag File per chapter/Section eliminates the need to fake it

11-23-2014, 07:30 PM	#8
JSWolf Resident Curmudgeon Posts: 79,745 Karma: 145864619 Join Date: Nov 2006 Location: Roslindale, Massachusetts Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3	Remind me never to use Pages to make any sort of eBook.

11-23-2014, 08:13 PM	#9
rosshalde Zealot Posts: 142 Karma: 10 Join Date: Jun 2014 Device: nook	what part of the css don't you guys like? Does it just contain too much information? Should all of the "0" quantities not be there? someone please take the example above for "s1" and simplify it as you think it should look.