font-size headings

[JLius]

Thank you Jellby, I'll give it a try this evening.

@RbnJrg: what's the benefit of using a svg image is this case? I chose jpg, because I thought this was the most commonly used extension for images. The jpg is rather small, so for size I don't need svg. Is there any other advantage a svg has? Does it display better on a reading device?

[Toxaris]

Originally Posted by RbnJrg

In that case, why not a svg image?

Because in that case I would end up tracing an image to an SVG. That will lead to bigger pictures.
On the other hand, I do put the titlepage png in a SVG wrapper just like the cover to ensure the image fills the page with the correct aspect ratio.

[JLius]

Originally Posted by Jellby

How about:

.subtitle { display: block}

which is in practice equivalent to using <div class="subtitle"> (also a valid option)?

And also, how do I get the .subtitle to start at a new line elegantly? I mean, not by just adding </br> to the html file?

[Jellby]

Originally Posted by JLius

And also, how do I get the .subtitle to start at a new line elegantly? I mean, not by just adding </br> to the html file?

That's what "display: block" is supposed to do.

[JLius]

Ah, okay!

[RbnJrg]

Originally Posted by Toxaris

Because in that case I would end up tracing an image to an SVG. That will lead to bigger pictures.
On the other hand, I do put the titlepage png in a SVG wrapper just like the cover to ensure the image fills the page with the correct aspect ratio.

No, no, no... You don't understand me. I don't mean a svg image based on a traced bitmap, but TEXT INSIDE A SVG WRAPPER. It's text, but its behaviours is like an image (with the advantage of a svg image). It's very light (because is only text but with the format you want). If I have a bit of time, I will post an example so all of you will be able to understand better what I want to say.

EDIT: This is what I want to say. Open the epub below in ADE; you will see something like:



Try to change the ADE font size; what happens? Nothing (because the title page is an image). And now try to change the size of the ADE windows; what happens? The title page adapts to its new windows size As you can see, you have the advantage of working with text and the advantage of working with images, all in one thing. And with only 4.2Kb (the whole epub).

Of course, I'm working with a "viewBox" for the svg wrapper of 800x600; you can change that as you wish. But in that case, you'll have to set new values for the "x" and "y" variables to position the text.

[JLius]

I see what the advantages are.
But when you use a different font for the titlepage, you'll have to embed this font in your epub. Also, when using a jpg you don't have to worry about font-copyright etc.

[Toxaris]

Originally Posted by RbnJrg

No, no, no... You don't understand me. I don't mean a svg image based on a traced bitmap, but TEXT INSIDE A SVG WRAPPER. It's text, but its behaviours is like an image (with the advantage of a svg image). It's very light (because is only text but with the format you want). If I have a bit of time, I will post an example so all of you will be able to understand better what I want to say.

No, I understood what you said. However, usually I recreate a titlepage based on the original book with fonts/images/etc. That is why I don't use SVG with text. I have used that for captions with images though.
If I use a basic font, I would use the SVG as you mention though.

[RbnJrg]

Originally Posted by JLius

I see what the advantages are.
But when you use a different font for the titlepage, you'll have to embed this font in your epub. Also, when using a jpg you don't have to worry about font-copyright etc.

Ok, I see you have valid reasons to use .jpg images (but in this case, for a title page image, I think it would be better to use .png/.gif images)

[RbnJrg]

Originally Posted by Toxaris

No, I understood what you said. However, usually I recreate a titlepage based on the original book with fonts/images/etc. That is why I don't use SVG with text. I have used that for captions with images though.
If I use a basic font, I would use the SVG as you mention though.

Ok, I see I was who have misunderstood the things If you want to mimic the original title page of a book, the better (an easier) is to use an image so, you make the things well

[JLius]

Originally Posted by Jellby

How about:

.subtitle { display: block}

which is in practice equivalent to using <div class="subtitle"> (also a valid option)?

<span> is by default an inline element, <div> is by default a block element, both with no other semantic content. I don't remember the details, but it may be that inline elements do not have any padding, or at least vertical padding.

So I used <div class="subtitle">. Works like a charm. That is a valid option, right? Or is span + block better for some reason?

[JLius]

Originally Posted by RbnJrg

Ok, I see you have valid reasons to use .jpg images (but in this case, for a title page image, I think it would be better to use .png/.gif images)

And what's the benefit of png/gif images? The titlepages are black&white, only one letter has a color. No images, only text.

[RbnJrg]

Originally Posted by JLius

And what's the benefit of png/gif images? The titlepages are black&white, only one letter has a color. No images, only text.

For that reason, precisely In this forum was talked a lot about that issue; do a search and you'll find a lot of info. But you can start with:

https://www.mobileread.com/forums/sho...67&postcount=5

and:

https://www.mobileread.com/forums/sho...54&postcount=8

[Jellby]

You can still create SVG images. Convert the fonts into paths (inkscape can do that) and won't need to care about font embedding or licensing.

[Tex2002ans]

Originally Posted by JLius

And what's the benefit of png/gif images? The titlepages are black&white, only one letter has a color. No images, only text.

Long story short,

JPG = Lossy format
GIF/PNG = Lossless format

JPG compression was designed for "natural" images (photographs). It does HORRIBLY on "artificial" images (charts, graphs, text).

Here is a tiny portion of a real-life book I just worked on. (This is an extremely good example to show off just how much better PNG is in these cases).

You can clearly see the JPG Haloing which occurs around the text/lines:



Because of the JPG algorithm, instead of being Black + White, you get Black + White + various shades of gray speckles buffering the lines.

Here is the same image saved as PNG:



As you can see, there is actually only Black + White, and NOTHING else. Zero loss/deterioration from the original.

Stats on the Original Image:

Resolution: 1292px x 541px
Grayscale JPG (90 quality): 89.5 KB
2-color PNG: 9.34 KB

In Total, this book had 4 B/W drawings, which I compressed down to 35.2 KBs.
The equivalent Grayscale JPGs saved at 90 quality would have been ~314 KBs.

If you wanted to squeeze the JPG filesize smaller, you would have to use a lower quality rating, which means that the haloing will get even worse.

Originally Posted by RbnJrg

For that reason, precisely In this forum was talked a lot about that issue; do a search and you'll find a lot of info. But you can start with:

https://www.mobileread.com/forums/sho...67&postcount=5

and:

https://www.mobileread.com/forums/sho...54&postcount=8

Thanks for the links back to my posts.... I had an inkling those posts linked back to me before I clicked on them! haha

One of my favorite posts to also link to showing off the advantages of PNG is this post (showing off a real-life chart):

https://www.mobileread.com/forums/sho...5&postcount=26

There was also some discussion of Title Pages + Front Matter in this topic:

https://www.mobileread.com/forums/sho...d.php?t=228927

I personally would recommend against a bitmap image as the Title Page, because it does not/will not scale well, and does not follow user preferences.

SVG is probably the best choice if you want the Title Page to be "forced" all on one page..... but keep in mind that SVG support will be a mixed bag:

• You lose the possibility of scaling the font (if I recall in the examples I have seen)
• If you are creating this for conversion to Kindle, you may/may not get some problems (KF8 supports SVG, but the older MOBI format does not).

Originally Posted by Jellby

You can still create SVG images. Convert the fonts into paths (inkscape can do that) and won't need to care about font embedding or licensing.

GrannyGrump posted a tutorial to show how to do this here:

https://www.mobileread.com/forums/sho...d.php?t=233131