Detect when font changes in EPUB

[NikaZhenya]

I am trying to use or create and event listener when the user changes the font size of the EPUB in an ereader with Javascript but I haven't find the way.

What I have tried without success:

* A `resize` event listener.
* A timing event that measures the font size.
* A listener that measures the scale of the `viewport`.

In `ebook-viewer` (aka Calibre viewer) I can see in the inspector that every time I change the font size the console prints `Viewport cfi: /2/4/2/2/1:1`. I see that when `1:1` changes, it's some sort of scale in int numbers.

That is why I tried to detect the viewport scale with [this](https://tombigel.github.io/detect-zoom/) or [this](http://menacingcloud.com/source/js/F...ewportScale.js).

So I suppose it is possible only because I can see trough the inspector of `ebook-viewer`...

All the tries didn't work on iOS either.

[RbnJrg]

Maybe this thread:

https://www.mobileread.com/forums/sh...d.php?t=265388

can give you some ideas.

[NikaZhenya]

What I am trying to solve is that in spanish poetry when a verse is larger that the box's size, it has to be a break and the next line has to be right aligned with a bracket:

A short verse.
A very very long
         [verse.

I figured out how to make this change. The issue is that when the user changes the font, the calculation has to be done again. I tried to solve this by doing a fixed EPUB, but iBooks and ebook-viewer allow the font increase.

So I was wondering how I can detect that change, I cant catch it with resize listener or inspecting the font size with a timer. So I think it is something related with some sort of scale, but the ways I have found to detect a change in the viewport scale doesnt work either.

The link that you send it seems that have the same issue to detect that kind of change, at least in iBooks and ebook-viewer.

[JSWolf]

Before you do this, where are you planning on selling this eBook? It will have to be ePub 3 and not ePub 2 compatible.

[NikaZhenya]

Originally Posted by JSWolf

Before you do this, where are you planning on selling this eBook? It will have to be ePub 3 and not ePub 2 compatible.

We are developing some tools for publishing in www.herramientas.perrotriste.io and now I am trying to solve this issue. We are working with EPUB3. The only think missed in this script is find the way to detect the font change for refresh. We already have the function of refresh that works very well with the resize event, which is not detected by iBooks or ebook-viewer.

The script (poetry.js) is available here: https://github.com/ColectivoPerroTri...ript/poetry.js

A working example: https://jsfiddle.net/dxr9azy7/

[RbnJrg]

Originally Posted by NikaZhenya

What I am trying to solve is that in spanish poetry when a verse is larger that the box's size, it has to be a break and the next line has to be right aligned with a bracket:

A short verse.
A very very long
         [verse.

I figured out how to make this change. The issue is that when the user changes the font, the calculation has to be done again. I tried to solve this by doing a fixed EPUB, but iBooks and ebook-viewer allow the font increase.

So I was wondering how I can detect that change, I cant catch it with resize listener or inspecting the font size with a timer. So I think it is something related with some sort of scale, but the ways I have found to detect a change in the viewport scale doesnt work either.

The link that you send it seems that have the same issue to detect that kind of change, at least in iBooks and ebook-viewer.

Hi;

The script in the post I sent you, does detect font changes in ADE 4.5 (that supports jscript and epub3). As you know, ADE is the norm regarding epub, so the fact the script works fine there, is a plus. However I couldn't get a way to detect font-size changes in others ereaders, mainly, due to the limitations of suchs ereaders. I'm afraid it'll be very difficult for you to find something to work fine in iOS

El script que te indiqué, puede detectar (de hecho lo hace) cambios en el tamaño de fuente en ADE 4.5 (y si mal no recuerdo, también lo hacía en Calibre). Dado que ADE es el estándar respecto a epubs, el que funcione bien en esa plataforma es una ventaja. Pero veo muy difícil que puedas encontrar algo que funcione bien en iOS; los lectores para esa plataforma tienen muchas limitaciones respecto a javascript

Saludos
Rubén

[NikaZhenya]

Yey! Because you are using the resize event I thought it was the same approach. But not, the trick is the iframe! Well, IT DOESN'T works with iOS, but it works in Calibre, I will test in ADE. And not only that, you helped me to simplify the code when I have to detect the font or window change, thanks!

If one day you need to display spanish poetry in spanish in a correct way, you can use the script

UPDATE

It works on Calibre, ADE, iBooks for Mac and iOS. It is a very good solution, thanks, Rubén. I left the sample.

Chingón, Rubén, gracias!

[RbnJrg]

Originally Posted by NikaZhenya

Yey! Because you are using the resize event I thought it was the same approach. But not, the trick is the iframe!

Exact! Only with an iframe I could get the resize event works.

If one day you need to display spanish poetry in spanish in a correct way, you can use the script

Of course I'll do Many thanks for posting the code!

UPDATE

It works on Calibre, ADE, iBooks for Mac and iOS. It is a very good solution, thanks, Rubén. I left the sample.

Great work! Now we need to find a method in order to detect font-size changes under Azardi and Readium

Chingón, Rubén, gracias!

De nada amigo, me alegra saber que mi script pudo ayudarte. Gracias también a tí por dar con la forma de evitar tener que usar JQuery.