font size problem calibre viewer, editor, content-server with non-resizing SVG text

[rjwse@aol.com]

[code]
<p>Normally, text resizes when you increase/decrease font. Normally, as you increase/decrease the viewing window text will NOT resize but will reflow. Text will reflow and not resize if you change the number of columns on screen.</p>

<p>By adding an SVG wrapper to some text you prevent that text from reflowing. It will conform to its viewBox. It now shrinks and grows just like an image. If you view with, say, five columns, the image and SVG text are tiny. If you view it in, say, two columns, the image and SVG text is large.</p>

<ol style="border: 1px black solid; border-radius:10px; background-color:gray; padding: .25em; ">

<svg xmlns="http://www.w3.org/2000/svg" preserve="" aspectratio="xMinYMin" viewBox="0 0 100 65">
<foreignObject width="100" height="100" >
<div xmlns="http://www.w3.org/1999/xhtml" style="font-size:.1em">By adding an SVG wrapper to some text you prevent that text from reflowing. It will conform to its viewBox. It now shrinks and grows just like an image. If you view with, say, five columns, the image and SVG text are tiny. If you view it in, say, two columns, the image and SVG text is large.</div>
</foreignObject>
</svg>

</ol>

<p style="background-color:khaki">OL wrapper around SVG-nonresizing-text. The OL wrapper has a gray background-color, 1px border, border-radius of 10px, and .25em padding.</p>

<p style="background-color: pink">This same behavior can be achieved by converting the text to an image. You would do this by screen-shot and saving the text so captured as a .png file. The disadvantage of doing this keeps the text letters from being crisp. Nor is that kind of text searchable because it is no longer real text, just a pattern of dots.</p>

<p>There is a disparity between calibre's editor viewer, calibre's regular viewer, and calibre's content server viewer regarding the SVG's font-size. By trial and error, I set font-size to 1/10th em. It shows full-size in calibre's editor viewer, correctly in the regular viewer, and way-too-small in the content server viewer. I cannot account for it.</p>
[code]

best regards, Pop

[kovidgoyal]

Why are you putting text inside SVG??

[rjwse@aol.com]

Probably I was too verbose in my explanation. The screenshots show the purpose, that font-size is "contained by size" within a container, in this case OL. I want to constrain text in the same manner that images are constrained. The text decreases and increases in the same manner as images. Normally, a caption below an image reflows as needed. Normally, an image caption responds differently than the image. I am enclosing an example with (1) normal captions, (2) SVG caption, and image, all surrounded by an OL colored frame. The 1/10th EM font size is something I cannot figure out. It works for regular calibre viewer, but fails with content server viewer. I do not know javascript, but suspect there is an alternate way of constraining text to container. VW works for the entire screen, but fails at columns. Best regards, Pop

[kovidgoyal]

my question was more why do you want to do this at all?? It means your text will become unreadably large on large screens or unreadably small on small ones. The whole point of ebooks is that text reflows and so works to remain legible at a variety of screen sizes.

[rjwse@aol.com]

I can think of many reasons. It is for style purposes and who can second-guess the intent of design? It jumps out. Since this is not generally available we do not miss it and cannot conceive what good it is. I take Faraday's position (see below). I was looking at how to partially cover a corner of an image with a caption, but when I shrunk the image the caption covered more and more of the image. I looked online to search and over the years many people have sought to no avail a method for constraining text to container. Mainly, I am doing it for fun and to learn. Remember 'The Mouse and the Lion'? I'm the mouse. Best regards, Pop

[kovidgoyal]

You are going to run into a lot of trouble with text in svg, best to avoid it.

[rjwse@aol.com]

I reluctantly agree. I tried it in other epub readers and it does not work. It works flawlessly in the calibre reader (but not the calibre content server reader). Can I beg your indulgence once more? Is there a simple way to do this with a short internal javascript? This is actually a dandy feature. Text never gets too small as it is limited to the image's smallest usable size, even at six columns. And It never gets too big as it is limited to the image's largest usable size. Best regards, Pop
PS: The most excellent feature of Ctrl-[, Ctrl-], Ctrl-+, Ctrl-- are very, very nice! Fonts and columns and captions and images!

[JSWolf]

No javascript in eBooks. That's right out.

[kovidgoyal]

Something like

<div onresize="this.style.fontSize = this.offsetHeight / 3 + 'px'">

[Brett Merkey]

who can second-guess the intent of design?

The user.

Have fun hacking. I do. Just remember that readers may not get the joke...

[rjwse@aol.com]

trying to get that to work. Put inside <style></style> commands?

[kovidgoyal]

No thats a div tag you use it to surround the text you want the font resized in.