Quote:
Originally Posted by theducks
I was being Literal
Some folk believe there is only one stylesheet and all they have to do is rip out the old one (book source Publishers X) and replace it wit 'My Own Stylesheet' and all is good 
Stylesheets and the Book files are Sets/pairings,
Unless the book starts out with the same stylesheet being used, a swap is difficult |
But not impossible
Three men in a boat is a great epub less for its content for our purposes but for its styling
its worth opening it in sigil and examining in detail you will want at least a tab open for the style sheet and a suitable chapter (mostly chapters and html files correspond but sometimes you want a page break where something needs to be at the top then its a good time to split a chapter at that point. For a more book like effect you might insert a blank page).
open another instance of sigil and open your text or just open a new epub and paste in your text. There are 2 ways of pasting paste in book view or paste in code view. Book view will try to format like the original which can be messy. if you paste into code view between <p> and </p> you should get one giant paragraph which is good because then you don't need to reflow each line. Back in book view you can split it back into paragraphs and headings.
<div> stuff </div> is very handy as you can style a div and its contents get styled at that level The lowest level really is <body> usually this might only set the page colour.
what can make css complicated is inheritance, say i set my page as a pink background then by default everything gets a pink background unless i apply a background colour setting at a higher level.
taking as example from above <p class="houseCO"> blah blah </p>
<h3 class="houseCN"> my heading </h3>
the reader should go looking for a style houseCO and apply its styles to that paragraph
then similarly for houseCN.
css heres a sample of 3 men in a boat
body {
font-family: "Fontin", serif;
}
h1 {
font-size: 2em;
text-align: center;
font-weight: normal;
text-indent:0;
margin:1.5em auto 0.25em;
}
.subtitle {
text-align: center;
font-size: 1.5em;
font-style: normal;
text-indent:0;
margin:0 auto;
}
here is an alternative layout for body
body { font-family: "Fontin", serif; }
The browser doesn't care about white space so the two body sections mean exactly the same.
the format is stylename opening brace { attribute comma value semicolon closing brace }
the class .subtitle has 5 pairs of attributes and values it could be put on 1 line but it gets hard to read so the coding style is usually as i pasted from the 3 men in the boat css file.
If we look at h1 what font will it use? well everything has default values these are browser/reader independant but generally the sameish however in this case "Fontin" serif was specified in body so h1 will probably inherit that. If h1 was in a div with a different style font then that font would be applied the rule is the nearer a style is to the text then the higher priority it is. if the specified font isn't available it should choose a serif font at least. Although the user might over ride with a different font.
(A handy thing about <div> s you can give them a size).
.subtitle can apply to any element with that class "subtitle" applied to it be it a <p or <h or <div
so you can lift styles rename them for your own scheme but you need to be careful of what they inherit or it can look quite different.
if you use the inspector in the preview pane you can see where in the css a particular attribute value comes from , it also tells you what was over ridden by the style sheet and what the value would have been without the style applied.
finally quirks ideally each reader would know all the rules and obey them but sometimes they don't my reader didn't respect the margins i specified round images and butted text against the image in the end i added a white border to my images to push the text back.
not elegant but it worked. Some ereader software will make a mess of fancy formating and will not for example, flow text around an image at all and place the image in a separate paragraph . On the positive side there are better reader programs about.
sizes tend to be in em px or % you can sometimes give just a number but then its up to the reader to guess what you meant so don't do it.
Some of the android readers do text to speech indian english is surprisingly good (easier on the ear than uk english) and the french voice is quite "ello , ello" in its pronunciation.
I don't think it is possible yet to specify a voice for lines of text but it could make for some interesting audio dialogue when it does make it into a later version of the standard, it is too much fun for it not to