font-size headings

[RbnJrg]

Originally Posted by Tex2002ans

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

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

Hi Tex;

I think you're a bit confused; the Granny's tutorial is for tracing bitmaps with Inkscape but what Jellby want to say is to convert text into "path". This kind of text is different from "traced text". Of course, you can use "traced text" but using text converted into path is by far easiest, clean and to offer better results.

[Tex2002ans]

Originally Posted by RbnJrg

I think you're a bit confused; the Granny's tutorial is for tracing bitmaps with Inkscape but what Jellby want to say is to convert text into "path". This kind of text is different from "traced text". Of course, you can use "traced text" but using text converted into path is by far easiest, clean and to offer better results.

You are correct. Now after I reread the post, I see what was meant!

Perhaps we should get a tutorial of Font -> SVG Paths up as well!

[roger64]

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.

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

Attachment 121409

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.

hi Rubén

Wonderful! I have been plagued for setting up title pages for years within my EPUBs and then here is a perfect -and easily adaptable- solution. Thank you very much.

Now I just have to learn quickly how to use Inkscape to add the logos...

[RbnJrg]

Originally Posted by roger64

hi Rubén

Wonderful! I have been plagued for setting up title pages for years within my EPUBs and then here is a perfect -and easily adaptable- solution. Thank you very much.

You are welcome, Roger

Now I just have to learn quickly how to use Inkscape to add the logos...

It's not difficult. Read this thread:

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

and insert the svg image created with Inkscape inside the svg wrapper; see my epub to watch how I inserted the "Loupe" logo; it's a piece of cake

[JLius]

Right, so I'll save my titlepages as png and see how that improves the quality. I use libreoffice draw by the way, to make my titlepages. Very easy to use for a simple soul like me.

As for my previous question: is it okay to use a <div> for the subtitles - as opposed to using a <span> with block?

[roger64]

Originally Posted by RbnJrg

it's a piece of cake

Indeed. Of course, grannies know a lot about preparing cakes!

[Jellby]

Originally Posted by Tex2002ans

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

Attachment 121434

Especially noticeably if you tilt an LCD screen...

Here is the same image saved as PNG:

Attachment 121435

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

and, of course, PNG does not need to be only black and white, it could also have some grey levels to mitigate aliasing. The point is, with PNG you can get exactly what you want, and not what the compression algorithm gives, emphatically not those blocky artifacts.

Originally Posted by JLius

Right, so I'll save my titlepages as png and see how that improves the quality. I use libreoffice draw by the way, to make my titlepages. Very easy to use for a simple soul like me.

As long as you do not open a JPG and save it as PNG...

As for my previous question: is it okay to use a <div> for the subtitles - as opposed to using a <span> with block?

Roughly yes, and I said it was, but let me now change my mind. I believe the XHTML specification does not allow some elements (including <p> and <h*>) to contain other block elements. Since <div> is a block element, it cannot be contained in <h1>, but a <span> (or any other inline element) with "display:block" is fine.

[roger64]

I applied the svg wrapper to the title page. Display with Calibre, Sigil, Prince was perfect. ADE 1.7.3 had trouble with it (the logo was on the top left, titles were pushed to the right...). I suppose this "old generation" viewer does not cope with it, does it happen too with recent versions of ADE?

[RbnJrg]

Originally Posted by roger64

I applied the svg wrapper to the title page. Display with Calibre, Sigil, Prince was perfect. ADE 1.7.3 had trouble with it (the logo was on the top left, titles were pushed to the right...). I suppose this "old generation" viewer does not cope with it, does it happen too with recent versions of ADE?

In my post:

https://www.mobileread.com/forums/sho...2&postcount=21

I attach a screenshot of my ADE 2.0.67532:



As you can see, it looks well. So I guess that your issue is due to your old version of ADE.

Regards
Rubén

[roger64]

Thank you. So, it's also OK with 2.0.

I often produce one 9x12 PDF and another IPAD size. One advantage is the fact that the SVG title page fits perfectly for the two sizes. Before I had to calculate percentages of padding-top and made mistakes for one or another size. This is really very convenient for handling the two, three or four pages before the main text.

[JLius]

Sorry, guess I'm just clumsy...

So I exported my titlepage as a png, but not it just won't fit the screen when I import it in my epub.

Export setting (default): W:992 H:1.403 pixels.
In my epub (I kept the same values I used for the jpg):

 <title>Titelblad</title>
  <style type="text/css" title="override_css">
  @page {
    padding: 0;
    margin: 0;
    }
  body {
    text-align: center;
    padding: 0;
    margin: 0;
  }
  </style>
</head>

<body>

  <div>

    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="100%" height="100%" viewBox="0 0 838 1186" preserveAspectRatio="none">
      <image width="992" height="1403" xlink:href="Titelblad.png"/>
    </svg>

  </div>

</body>

I already tried exporting it with W:600 H800 and setting it also to 600/800 in the svg, but that looked also awfull.

If you are wondering were I got the W992 H1403 (and all the other stuff before that): it was the default setting calibre used for the cover, so I thought I'd go with that.

[RbnJrg]

Originally Posted by JLius

Sorry, guess I'm just clumsy...

So I exported my titlepage as a png, but not it just won't fit the screen when I import it in my epub.

Export setting (default): W:992 H:1.403 pixels.
In my epub (I kept the same values I used for the jpg):

 <title>Titelblad</title>
  <style type="text/css" title="override_css">
  @page {
    padding: 0;
    margin: 0;
    }
  body {
    text-align: center;
    padding: 0;
    margin: 0;
  }
  </style>
</head>

<body>

  <div>

    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="100%" height="100%" viewBox="0 0 838 1186" preserveAspectRatio="none">
      <image width="992" height="1403" xlink:href="Titelblad.png"/>
    </svg>

  </div>

</body>

I already tried exporting it with W:600 H800 and setting it also to 600/800 in the svg, but that looked also awfull.

If you are wondering were I got the W992 H1403 (and all the other stuff before that): it was the default setting calibre used for the cover, so I thought I'd go with that.

I think you mixed two concepts If you are going to use a .png image as title page, then is not neccesary to enclosed in a svg wrapper. In my post I used a svg wrapper because I didn't want to use a .png image, just text. But now that you are going to use a image, just write in your .xhtml file:

 <title>Titelblad</title>
  <style type="text/css" title="override_css">
  @page {
    padding: 0;
    margin: 0;
    }
  body {
    text-align: center;
    padding: 0;
    margin: 0;
  }
  </style>
</head>

<body>

  <p><img alt="" height="100%" src="Titelblad.png"/></p>

</body>

However, take in count that you are not using a 3:4 image, so is probable (depend on the device reader) that the title page doesn't fit perfectly. And check that the image path is correct.

[Toxaris]

If the titlepage.png is a single page and should fill out the screen (with keeping the aspect ratio of course), putting it in a SVG wrapper is still the best choice.
I use:

<div>
    <svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 600 800" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink">
      <image height="800" width="600" xlink:href="../Images/titlepage.png"></image>
    </svg>
  </div>

Notice the preserveAspectRatio difference. This will keep the aspect ratio and not distort the image. Change the red values to the actual dimension of your image.
If you do not use folders in your ePUB, you must omit '../Images/' from the code.

[JLius]

Thank you Toxaris, I'll try that this evening.
Is it best to save my png as 800/600, or should I just leave it at 992/1403?

[Toxaris]

You can leave it. If you are going to resize, ensure that your ratio stays intact. The 800x600 is just an example.