Responsive (or Viewport) sized typography in Sigil !!

[RbnJrg]

Just now I realized that Sigil supports responsive sized typography. That is a very good feature for things like tables, captions, etc. For example with:

h1 {
    font-size: 4vw;
}

when the viewport width increases, so does the font-size (and without using media queries ). It's like the normal text becomes svg text.

However I found that -in Sigil- the font-size doesn't change dynamically. So if we resize our viewport, the font-size will retain its initial size and will only be recalculated when -for example- the Preview is changed of place (maybe for that reason I didn't discover this Sigil feature before). Of course, also we need ebook readers that support all these css3 values To learn a bit about this "new" thing, I recomend this page:

http://css-tricks.com/viewport-sized-typography/

And in this another page we can watch the feature in action:

http://css-tricks.com/examples/ViewportTypography/

Try changing the browser window size and after that, try changing the font size; you'll be surprised

Regards

[Arios]

Hi Ruben,

Right now I'm trying to learn HTML5 and CSS3 and your trick is very pertinente, with for example a kind of configuration like:

 @media all and (max-width: 1024px)

But are you sure it applies either way to Sigil or epub? As you said there are no results within Sigil or in a eInk reader. However Sigil does not see the code "font-size: 4vw;" as incorrect.

Otherwise, I misunderstood the meaning of your post.

PS Hope it's not too hot in Rosario; relatively warm here in the "Great North"!

[JSWolf]

Don't expect such tricks to work in ADE whihc is ued as the number one software for viewing ePub.

Also, Kobo might not respect that 1024px as it doesn't respect px as a font size. So it's possible it might reject anything with px.

[RbnJrg]

Originally Posted by Arios

Hi Ruben,

Right now I'm trying to learn HTML5 and CSS3 and your trick is very pertinente, with for example a kind of configuration like:

 @media all and (max-width: 1024px)

But are you sure it applies either way to Sigil or epub? As you said there are no results within Sigil or in a eInk reader. However Sigil does not see the code "font-size: 4vw;" as incorrect.

Otherwise, I misunderstood the meaning of your post.

PS Hope it's not too hot in Rosario; relatively warm here in the "Great North"!

Hi Arios;

It's quite hot here (about 34 Cº) and still didn't start the summer

Now to your question. Yes, I'm sure; Sigil supports units like vw, vh, vmax and vmix. And also you can see it. Just do the following:

1. Apply the style with "vw" to one of your header (let's suppose that you have a <h1> tag like:

<h1>This is my test title</h1>

with the asociated style:

h1 {
    font-size: 5vw;
    text-align: center;
}

2. Now enable the Preview (if you don't have it enabled yet) by pressing the key F10. For convenience, set the Preview docked on the right side of Sigil.

3. Now make the Preview wider by dragging to the left, the left side of the Preview. As you can watch, the size of the <h1> title doesn't change but now do click on the Book View (I mean the window, not the tool in the toolbar). After that the wide of the text in Preview has changed!!!

4. Do again wider (or narrower) the Preview and do click in the Book View; the size of the text changes again (and if you do click in Preview, now the text in Book View changes too).

This property is great. Suppose you have a caption that looks great but if the user changes the ereaer font-size, caption will look ugly. Then by giving the caption a size in "vw" we'll be sure the caption always will have the same proportion of the screen, no matter its resolution, no matter the font-size set by users and without need to use media queries. The same is valid for titles and subtitles (supose you want a title always take only one line). As I said, is like the normal font becomes svg font! But remember that "vw", "vh", etc., is not only for text; they can be used for any sizing value (if ereaders support them ).

Regards
Rubén

[Jellby]

Originally Posted by RbnJrg

Suppose you have a caption that looks great but if the user changes the ereaer font-size, caption will look ugly. Then by giving the caption a size in "vw" we'll be sure the caption always will have the same proportion of the screen, no matter its resolution, no matter the font-size set by users and without need to use media queries.

How great! The user enlarges the font size to be able to read it and it doesn't work!

I agree it's nice and it may be useful for some purposes, but as mentioned above do not expect it to work in any ePub reader (though it might somehow work in browser-based readers)

[RbnJrg]

Originally Posted by Jellby

How great! The user enlarges the font size to be able to read it and it doesn't work!
I agree it's nice and it may be useful for some purposes...

Yes, that is the idea You say well, it may be useful for only some purposes (captions, some titles and subtitles and similars -maybe text in tables-). There where we like to use svg text, we could use viewport sized typography. Of course, we are not going to use that feature for normal text

But as mentioned above do not expect it to work in any ePub reader (though it might somehow work in browser-based readers)

Yes, so far no ereader supports that property. I read that webkit had support for it but I tried in Kindle and nothing; Kindle ignores styes with "vw" units.