Help with CSS

[joshua.kendrick]

I am currenty trying to figure out how to have multiple text sizes for my epub. I am writing it in Sigil, and it has been an awesome tool, but when I load my CSS page, and then load my epub to my reader, it only shows a single text size and won't let me adjust it. I'm sure I'm doing something wrong. I want to be able to make my text size larger or smaller when I need to without having to continually change the coding. Any help would be great.

[DiapDealer]

Originally Posted by joshua.kendrick

I want to be able to make my text size larger or smaller when I need to without having to continually change the coding. Any help would be great.

Don't specify any hard-coded font-sizes in your CSS or html. Use relative units (em or %) if you need some text bigger or smaller than the regular body text.

p {
  text-indent: 1.2em;
  margin: 0;
}

p.bigger-text {
  text-indent: 1.2em;
  font-size: 1.125em;
  margin: 0;
}

p.smaller-text {
  text-indent: 1.2em;
  font-size: 0.85em;
  margin: 0;
}

[joshua.kendrick]

This is the current basic coding I am using. I think that this may be part of my issue, but I don't know.

body {
font-family: "book-antiqua";
font-size: 15px;
color: black;
background-color: white;
margin-top: 30px;
margin-bottom: 20px;
margin-left: 30px;
margin-right: 30px;
}

p {
color: black;
font-size: 15px;
font-style: normal;
font-weight: normal;
text-align: justify;
text-indent: 30px;
line-height: 22px;
}

h1 {
color: black;
font-size: 45px;
font-style: bold;
text-align: center;
line-height: 30px;
}

h2 {
color: black;
font-size: 22px;
font-style: bold;
text-align: center;
line-height: 20px;
}

h3 {
color: black;
font-size: 15px;
font-style: italic;
font-weight: normal;
text-align: justify;
line-height: 15px;
}

h4 {
color: black;
font-size: 15px;
font-style: bold;
font-weight: bold;
text-align: justify;
line-height: 1px;
}

h5 {
color: black;
font-size: 18px;
font-style: bold;
text-align: center;
line-height: 20px;
}

h6 {
color: black;
font-size: 15px;
font-style: italic;
text-align: center;
font-weight: normal;
line-height: 20px;
}

Any ideas?

[davidfor]

Originally Posted by joshua.kendrick

font-size: 15px;

That is the problem and is what DiapDealer suggested it would be.

You are using an absolute unit. This means the size will be 15 of whatever the device defines a pixel as. If you a relative unit, the device will resize according to that. I usually use "em" which is effectively the size of a character with the current font and font size. I would probably code your first three classes as:

body {
font-family: "book-antiqua";
font-size: 1em;
color: black;
background-color: white;
margin-top: 2em;
margin-bottom: 2em;
margin-left: 2em;
margin-right: 2em;
}

p {
color: black;
font-size: 1em;
font-style: normal;
font-weight: normal;
text-align: justify;
text-indent: 1.2em;
line-height: 1em;
}

h1 {
color: black;
font-size: 3em;
font-style: bold;
text-align: center;
line-height: 1em;
}

And a lot of those styles are overkill or duplicating the defaults. The way I would really code these is:

body {
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
}

p {
text-indent: 1.2em;
}

h1 {
font-size: 3em;
font-style: bold;
text-align: center;
margin-top: 1em;
margin-bottom: 2em;
}

On the Kobo devices, that would resize well. And I don't care to set the standard body font. I might set the heading font if I wanted something different and had something that fit the story.

[joshua.kendrick]

So I changed all of the px to em, and bingo! I also was trying to run the whole file off a single CSS. I found it easier for me to have a seperate CSS for each section, ie, Title, Copyright, Table of Contents, so forth and so on. Seems to be working now. Thanks for the help DiapDealer and davidfor.

[Hitch]

Originally Posted by joshua.kendrick

So I changed all of the px to em, and bingo! I also was trying to run the whole file off a single CSS. I found it easier for me to have a seperate CSS for each section, ie, Title, Copyright, Table of Contents, so forth and so on. Seems to be working now. Thanks for the help DiapDealer and davidfor.

Joshua:

Really--you don't need that many stylesheets. It probably means you have a ton of duplicated and unneeded styles, which can cause issues with some readers. If you need that type of segregation, use comments in your Stylesheet to separate out the sections (we do that), for each section of the book, but having a new stylesheet for each page/piece is really overkill.

Hitch

[PeterT]

Additionally (and I'm NOT an expert at all), wouldn't one often use a class selector to override a paragraph (or other) entity, so even if you DID want different formatting on a paragraph in an Appendix as opposed to the main body you would code

p {
color: black;
font-size: 1em;
font-style: normal;
font-weight: normal;
text-align: justify;
text-indent: 1.2em;
line-height: 1em;
}
.appendix {
color: red;
}


<p>text in main body</p>
....
<p class="appendix">text in appendix</p>

[eschwartz]

Originally Posted by Hitch

Joshua:

Really--you don't need that many stylesheets. It probably means you have a ton of duplicated and unneeded styles, which can cause issues with some readers. If you need that type of segregation, use comments in your Stylesheet to separate out the sections (we do that), for each section of the book, but having a new stylesheet for each page/piece is really overkill.

Hitch

Does it really make a difference whether the css is in commented blocks vs separate stylesheets? Assuming it is the same css either way. Lets say you have your special titlepage css in titlepage.css, and special story css in story.css, then link each to the appropriate page(s). It would achieve the same goal, with arguably variable efficiency in conveying the meaning of what you are trying to do.

I assume the main objective is to make sure that the same styles are not repeated on multiple stylesheets (if the different sections share identical css), nor that heaven forbid the same stylesheet is duplicated for each page.

[theducks]

Originally Posted by eschwartz

Does it really make a difference whether the css is in commented blocks vs separate stylesheets? Assuming it is the same css either way. Lets say you have your special titlepage css in titlepage.css, and special story css in story.css, then link each to the appropriate page(s). It would achieve the same goal, with arguably variable efficiency in conveying the meaning of what you are trying to do.

I assume the main objective is to make sure that the same styles are not repeated on multiple stylesheets (if the different sections share identical css), nor that heaven forbid the same stylesheet is duplicated for each page.

I would expect that device Memory Management would have a simpler time
not swapping multiple files on a new section file: KISS

[Hitch]

What My One Twoo Wuv Ducky Said. ;-)

Hitch

[Jellby]

Originally Posted by theducks

I would expect that device Memory Management would have a simpler time
not swapping multiple files on a new section file: KISS

It wouldn't surprise me if some devices were dumb enough to read the same file again and again. In that case having separate smaller files could be more efficient