[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