Ability to adjust font size in the Explain section on mobile

Readlang interface works great for the most part, but Explain section font size on mobile is very small. It is not a problem on a desktop. It is large enough there, and even if it were not it is easy to change it using a browser extension. However, there is not straightforward way to do that on mobile. Would it be possible to add the ability to adjust the font size in that window?

I totally agree with you :sweat_smile:

My biggest complaint about the Readlang was the lack of ability to easily adjust the font size in the Explain texts on mobile. So, I started looking for methods to do it outside Readlang.

First of all, I tried to use font size settings on several mobile browsers (on Android). That works to a degree, but if I set zoom more than 125%, the interface becomes distorted too much and unusable.

I searched for other methods, tried to use bookmarklets, but they did not work on Chrome in Android.

I tried to use Kiwi Browser, because it supports text reflow on zoom, but this method does not work on Readlang. Then I learned that Kiwi Browser supports extensions. I was able to install Stylus and create a style for Readlang. Finally, it worked as needed. However, Kiwi Browser lacked in other functionality and was quite buggy. And apparently it is obsolete now. Browser creators recommend to use Edge.

Edge on Android indeed supports a limited range of extensions now. Stylus was not among them, so I was frustrated at first. Then I decided to check carefully the entire list. While Edge does not support Stylus, it does support Tampermonkey! So, it is possible to use Tampermonkey script to apply the desired formatting where needed. It is less convenient than Stylus, but it works. That is the solution that I am using now.

Still, it would be nice to have the ability to adjust Explain font size independent of the browser.

2 Likes

Thanks for the suggestion. The simplest way to do this from my point of view would be to just increase the font size for everyone for certain screen widths. To get an idea if this would be feasible, can you please let me know what device you are using along with a screenshot of how the Explain tab currently looks on your device. Thanks!

1 Like

I tried it on Samsung Galaxy S10 Lite (G770F). It has the screen resolution of 2400 x 1080.
Browser zoom is set to 110%. If I set it higher than that, the interface starts to get distorted.

This is the original Explain tab:

I applied this CSS:
div.explanation {
font-size: 26px !important;
color: black;
}

Now it looks like this:

The font size is similar to that used in the reader:

If it is not feasible to make the font size freely adjustable, it might be sufficient to be able to set it to the same size as that used in the reader.

1 Like

That makes sense. I’ve just updated it so that the font size used in the Explain tab is the same as the main text. Refresh your Readlang tab to try it.

2 Likes

Wonderful! It works as expected and follows the reader font size changes. Finally I can use Readlang comfortably on my ebook reader as well.
Thank you very much!

2 Likes