Text with fixed proportional size

[SBT]

...I know, inconsistent title. What I wonder is if it is possible to make a given word always fill a certain proportion of the display?
Something analogous to

img {width:80%}

for text, so that CHAPTER ONE always takes up 80% display width, not more, not less, not over more than one line?
It doesn't seem possible without using SVG, but maybe somebody has a CSS trick up their sleeve?

[DaleDe]

Why not just use SVG?

[RbnJrg]

Originally Posted by SBT

...I know, inconsistent title. What I wonder is if it is possible to make a given word always fill a certain proportion of the display?
Something analogous to

img {width:80%}

for text, so that CHAPTER ONE always takes up 80% display width, not more, not less, not over more than one line?
It doesn't seem possible without using SVG, but maybe somebody has a CSS trick up their sleeve?

EDIT: Also see post #7 of this thread:
https://www.mobileread.com/forums/sho...06&postcount=7

Hmmm, the problem is the text, not the box where is going to be the text. You can make a box in order to fill always, let's say, 80% width and 25% height. Maybe using a font-size measured in "vw" (or in "vh") (let's say: font-size: 5vw or font-size: 8vh) could do the trick. But I don't know if works in all ereaders (more probably not )

Also I can think in a solution that uses svg partially. For example:

In your stylesheet.css file write:

html {
    height: 100%; /* very important */
    margin: 0;
}

body {
    height: 100%;  /* very important */
    margin: 0;
}

.container {
    display: table;
    height: 25%;
    width: 80%;
    text-indent: 0;
    text-align: center;
    vertical-align: middle;
    margin: 0 auto; /* or margin: 0 10%; */
    border: 2px solid black;
}

.content {
    display: table-cell;
    vertical-align: middle;
    background: url("../Images/Image1.svg") center center no-repeat;
    background-size: contain;
    height: 100%;
}

In your .html file write:

<div class="container">
    <p class="content">&nbsp;</p>
</div>

Finally, you need a svg file with the text you want to use. My svg text file was:

<svg 
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   version="1.1"
   width="80"
   height="20"
   id="svg3010">
  <text x="40" y="12.5" text-anchor="middle" fill="red" style="font-size: 10px; font-weight: bold">This is a title</text>
</svg>

Here you can see a screenshoot of my Sigil:



and here another screenshoot (with another size):



Below you can see the respective ePub. Of course, this kind of things doesn't work in ADE

Regards
Rubén

[DaleDe]

Try this:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="80%" height="50%" viewBox="0 0 1000 300"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<desc>Example text01 - 'Hello, out there' in blue</desc>

<text x="50" y="50"
font-family="Verdana" font-size="50px" fill="blue" >
Hello, out there
</text>
</svg>

The pixels are scaled to fit the width and height settings.

[mrmikel]

But in an PRS-300, it doesn't respond to text size settings. But in ADE it does. Interesting technique.

[SBT]

Thanks for all your replies.
As I suspected, SVG seems to be the only way. My slight reservation has been due to mrmikel's observation for the PRS-300, which probably also is true for the PRS-505, which also has a rather patchy SVG implementation.
If I am to follow the SVG path, then I'm sorely tempted to convert the text to paths in Inkscape or similar, and stop worrying about font handling in different readers' SVG implementations.
BTW, does anybody know of a command-line method in linux for converting a string in a given font to an svg file?

[RbnJrg]

This solution (with partial use of SVG) also works in ADE:

In the stylesheet:

html {
    height: 100%; /* very important */
    margin: 0;
}

body {
    height: 100%;  /* very important */
    margin: 0;
}

.container {
    height: 25%;
    width: 80%;
    text-indent: 0;
    text-align: center;
    margin: 0 10%;  
    background: url("../Images/Image1.svg") center center no-repeat;
    background-size: contain;
    border: 2px solid blue;
}

In the .html file:

<div class="container">
    &nbsp;
</div>

As Image1.svg file:

<svg 
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   version="1.1"
   width="600"
   height="200"
   id="svg3010">
  <text x="300" y="130" text-anchor="middle" fill="red" style="font-size: 100px; font-weight: bold">This is a title</text>
</svg>

This is as it looks in ADE:



Regards
Rubén

[mrmikel]

This is how it looks in the reader library.

It runs outside of the bounds of the box.

Sigh.

[Toxaris]

Also, the height: 100% in the body and html can cause serious issues in at least the PRS-T* series. It can block you from moving to another page by both the hardware button and the swipe.

[DaleDe]

Originally Posted by mrmikel

But in an PRS-300, it doesn't respond to text size settings. But in ADE it does. Interesting technique.

thanks, you can play with the font-size and dimensions of the view box to set the maximum you want. 150px is interesting here. I opened this file in notepad and in my browser and played with the numbers. Just grab the edge of the browser and make it smaller or larger and see the text shrink or expand while you are moving the edge. Lots of fun. Play with the numbers percentages and font size and have fun. Note view box size may need to be bigger to make the whole text fit based on the length of the text but once set it scales well.

Dale

[mrmikel]

I shrunk the text size to 80 px and it works great in the Reader Library. Makes me want to experiment with more things.