MobileRead Forums - What dark art is this?

MobileRead Forums (https://www.mobileread.com/forums/index.php)

- ePub (https://www.mobileread.com/forums/forumdisplay.php?f=179)

- - What dark art is this? (https://www.mobileread.com/forums/showthread.php?t=188571)

What dark art is this?

Fortunately for me, I have a brother who studied engineering, and he introduced me to the idea of a cascade error - something unobtrusive that causes unexpected behavior of code which is very difficult to trace, because it affects things that it is seemingly not directly related to.

CSS seems like something of a dark art to me: after figuring out the complexities of embedding a font (largely thanks to posts here), redefining the H1 entity (defined after the body entity in a single style sheet, as copied below) caused the body to add the same amount of line space as the H1. The line-height: 100%; was added to the body definition to correct this effect, but I don't understand why it should have been necessary.

Does this make sense to anybody :blink:

Code:

body {font-family:"Palatino Linotype", Georgia, serif; 

        text-align: justify; 

        line-height:100%;

        }



h1 {font-family: "Palatino Linotype", serif; 

    font-weight: normal; 

    font-style: italic;

    font-weight: bold;

    color: rgb(24, 136, 173);

        text-align: center;

        line-height: 110%;

    }

Quote:

Originally Posted by Kittybriton (Post 2191706)

Code:

body {font-family:"Palatino Linotype", Georgia, serif; 

        text-align: justify; 

        line-height:100%;

        }



h1 {font-family: "Palatino Linotype", serif; 

    font-weight: normal; 

    font-style: italic;

    font-weight: bold;

    color: rgb(24, 136, 173);

        text-align: center;

        line-height: 110%;

    }

Code:

body {

font-family:"Palatino Linotype", Georgia, serif; 

text-align: justify;

margin-top: 0;

margin-bottom: 0;

margin-left: 0;

margin-right: 0;

widows: 0;

orphans: 0

}



h1 {

margin-top: 1em;

margin-bottom: 1em;

font-style: italic;

color: rgb(24, 136, 173);

text-align: center;

}

I've changed the code as you can see. You left out margins for the header for the chapter. Also you've left out the margins in the body style. But to be honest, I personally prefer h2 for chapter headers. Also, unless you are changing the font, you don't need to have the font-family line that you have in body as that is now the default unless another style overrides that. The widows and orphans being 0 is a personal choice based on the ends of the screen page not being constant.

@Kittybriton: Just checked it in Chrome browser window; I suppose you have noticed that default line height isn't necessarily 100% (in my case more?)

Thanks JSWolf. Since Sigil likes to take care of errors itself (and I wasn't at my best after two very early starts), it may be that I wasn't careful about checking for changes that had been inserted automatically.

Yes, SBT, that is exactly what puzzled me when I checked it in Sigil and the Firefox ePub Reader plugin. What I still don't understand is why the line-height changed without me specifying anything that, as far as I can see, related to line-height.

Before I started specifying the font, the line-spacing was unchanged. My first attempt, with the header definition before body, worked to select Palatino for the header, but was ignored in the body. I have a vague recollection from way back that when I glanced at the w3 consortium specs, they said something about precedence when defining entities, but at the time didn't take note of it.

[postscript] Upon checking the XML code, I find that Sigil had decided the first paragraph should be in the h2 entity, rather than p. Corrected that, and the sun shines once more :cool:

There are other questions I will need to answer if I am to decide whether to commit the time and energy necessary to learning the ePub format in depth, so another thread will probably be forthcoming.

Looking for a quick answer rather than being diligent and Googling, can anyone tell me, does the ePub format support the use of Javascript?

Found a satisfactory answer pro tem, i.e. possibly in more advanced versions, but best avoided.

Checking things in Sigil and Firefox may not be sufficient. You might check it in your device as well, because the rendering engines for Sigil and Firefox can vary from your device and other different devices.

Thanks Mrmikel, yes, I am trying to check the output in as many devices as I can beg or borrow, knowing that not all readers are created equal.