Small Question

Ephraim · 01-06-2011, 03:10 AM

In the book I'm making at the beginning of each chapter I add the chapter number,chapter title, and chapter image. Problem is that most pages show up in my eReader just fine. Everything fits just right......while a few go over into the next page because chapter title might be to long or image might be bigger. Is there an code that will always keep everything on one page in my eReader or is it a matter of just resizing fonts and images to fit in alotted space. I'd like to keep all my fonts for chapter titles and numbers the same size. I dont prefer to have some text smaller just cause its longer to have it fit. Any thing i can do? Thanks in advance.

Jellby · 01-06-2011, 04:07 AM

You can wrap whatever you want to fit in a single page in a <div>, and assign "page-break-inside: avoid" to its CSS style. This only works if the content actually fits in a page, it will add a pagebreak before if necessary, but it won't alter font sizes, or spacing.

Ephraim · 01-06-2011, 12:32 PM

Sorry...Not too good at CSS yet. How do I go about doing this?

<?xml version="1.0"?>
<!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>
<meta content="http://calibre-ebook.com" name="generator" />

<title>unamed</title>
<meta content="2008-6-23" name="creation-time" />
<meta content="2008-6-27" name="revision-time" />
<link href="../Styles/Style%20Sheet.css" rel="stylesheet" type="text/css" />

<style type="text/css">
@page { margin-bottom: 5.000000pt; margin-top: 5.000000pt; }

span.sgc-1 {font-weight: bold}

h3.sgc-3 {text-align: center;}
h2.sgc-2 {text-align: center;}
body, div, p, h1, h2, h3, h4 { margin: 0; padding: 0; }

span.sgc-4 {font-size: 34px;}

span.sgc-6 {font-size: 27px;}
span.sgc-5 {font-size: 27px; font-weight: normal}
</style>
</head>

<body class="calibre">
<div class="s">
<p class="calibre2"></p>

<h2 class="sgc-2 sigilNotInTOC"><span class="sgc-4"><br /></span></h2>

<h2 class="sgc-2 sigilNotInTOC"><span class="sgc-4">Chapter 1</span></h2>
</div>

<div class="s">
<p class="calibre2"></p>

<h3 class="sgc-3 sigilNotInTOC"><span class="sgc-5"><img alt="" src="../Images/SS-18.JPG" /></span></h3>

<h3 class="sgc-3" id="heading_id_2"><span class="sgc-6">The Guy Who Walked</span></h3>
</div>
</body>
</html>

Jellby · 01-06-2011, 12:59 PM

Quote:

Originally Posted by Ephraim

Sorry...Not too good at CSS yet. How do I go about doing this?

Add the red stuff:

<?xml version="1.0"?>
<!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>
<meta content="http://calibre-ebook.com" name="generator" />

<title>unamed</title>
<meta content="2008-6-23" name="creation-time" />
<meta content="2008-6-27" name="revision-time" />
<link href="../Styles/Style%20Sheet.css" rel="stylesheet" type="text/css" />

<style type="text/css">
@page { margin-bottom: 5.000000pt; margin-top: 5.000000pt; }

span.sgc-1 {font-weight: bold}

h3.sgc-3 {text-align: center;}
h2.sgc-2 {text-align: center;}
body, div, p, h1, h2, h3, h4 { margin: 0; padding: 0; }

span.sgc-4 {font-size: 34px;}

span.sgc-6 {font-size: 27px;}
span.sgc-5 {font-size: 27px; font-weight: normal}
div.nobreak {page-break-inside: avoid;}
</style>
</head>

<body class="calibre">
<div class="nobreak">
<div class="s">
<p class="calibre2"></p>

<h2 class="sgc-2 sigilNotInTOC"><span class="sgc-4"><br /></span></h2>

<h2 class="sgc-2 sigilNotInTOC"><span class="sgc-4">Chapter 1</span></h2>
</div>

<div class="s">
<p class="calibre2"></p>

<h3 class="sgc-3 sigilNotInTOC"><span class="sgc-5"><img alt="" src="../Images/SS-18.JPG" /></span></h3>

<h3 class="sgc-3" id="heading_id_2"><span class="sgc-6">The Guy Who Walked</span></h3>
</div>
</div>
</body>
</html>

But, if you are getting a pagebreak there, it's because it does not fit in a page, and there's not much to do.

Ephraim · 01-06-2011, 01:29 PM

Thanks...I will work on it and hopefully it will solve my problem.

01-06-2011, 03:10 AM	#1
Ephraim Enthusiast Posts: 29 Karma: 10 Join Date: Nov 2010 Device: ibooks	Small Question In the book I'm making at the beginning of each chapter I add the chapter number,chapter title, and chapter image. Problem is that most pages show up in my eReader just fine. Everything fits just right......while a few go over into the next page because chapter title might be to long or image might be bigger. Is there an code that will always keep everything on one page in my eReader or is it a matter of just resizing fonts and images to fit in alotted space. I'd like to keep all my fonts for chapter titles and numbers the same size. I dont prefer to have some text smaller just cause its longer to have it fit. Any thing i can do? Thanks in advance.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
PRS-300 Med font size too big, but small font size too small	eli2k	Sony Reader	4	05-28-2010 09:47 AM
A small favor?	PhishStyx	iRex	3	01-31-2009 02:06 PM
small talk and more	Alexander Turcic	Announcements	1	11-26-2002 09:49 AM

01-06-2011, 04:07 AM	#2
Jellby frumious Bandersnatch Posts: 7,543 Karma: 19001583 Join Date: Jan 2008 Location: Spaniard in Sweden Device: Cybook Orizon, Kobo Aura	You can wrap whatever you want to fit in a single page in a <div>, and assign "page-break-inside: avoid" to its CSS style. This only works if the content actually fits in a page, it will add a pagebreak before if necessary, but it won't alter font sizes, or spacing.

01-06-2011, 12:32 PM	#3
Ephraim Enthusiast Posts: 29 Karma: 10 Join Date: Nov 2010 Device: ibooks	Sorry...Not too good at CSS yet. How do I go about doing this? <?xml version="1.0"?> <!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> <meta content="http://calibre-ebook.com" name="generator" /> <title>unamed</title> <meta content="2008-6-23" name="creation-time" /> <meta content="2008-6-27" name="revision-time" /> <link href="../Styles/Style%20Sheet.css" rel="stylesheet" type="text/css" /> <style type="text/css"> @page { margin-bottom: 5.000000pt; margin-top: 5.000000pt; } span.sgc-1 {font-weight: bold} h3.sgc-3 {text-align: center;} h2.sgc-2 {text-align: center;} body, div, p, h1, h2, h3, h4 { margin: 0; padding: 0; } span.sgc-4 {font-size: 34px;} span.sgc-6 {font-size: 27px;} span.sgc-5 {font-size: 27px; font-weight: normal} </style> </head> <body class="calibre"> <div class="s"> <p class="calibre2"></p> <h2 class="sgc-2 sigilNotInTOC"><span class="sgc-4"><br /></span></h2> <h2 class="sgc-2 sigilNotInTOC"><span class="sgc-4">Chapter 1</span></h2> </div> <div class="s"> <p class="calibre2"></p> <h3 class="sgc-3 sigilNotInTOC"><span class="sgc-5"><img alt="" src="../Images/SS-18.JPG" /></span></h3> <h3 class="sgc-3" id="heading_id_2"><span class="sgc-6">The Guy Who Walked</span></h3> </div> </body> </html>

01-06-2011, 01:29 PM	#5
Ephraim Enthusiast Posts: 29 Karma: 10 Join Date: Nov 2010 Device: ibooks	Thanks...I will work on it and hopefully it will solve my problem.

Advert

Advert