Scalable title text that works for all e-readers

[Evil Overlord]

As a small publisher, I'm looking for a way to scale my epub title so that it fits e.g., 80% of the screen, regardless of window size.

vw
I had used vw, and Google suggested clamp (e.g., below), but apparently that doesn't work for all e-readers

h1 {
    font-size: clamp(1.2rem, 4vw, 2.5rem); 
}

container
I have tried a scaling container (e.g., below), but apparently that also doesn't work for all e-readers, and I got inconsistent results even in Sigil.

<div class="title-container">
    <h1 class="title-single-line">Title</h1>
</div>

.title-container {
    width: 90%;
    margin: 0 auto; 
    text-align: center;
}

.title-single-line {
    white-space: nowrap;
    font-size: 8vw%;
    display: block;
}

svg container
Google also once suggested an svg container (below), but apparently there are issues. (Also, I know nothing about svg).

<div style="width: 100%; max-width: 600px; margin: 0 auto;">
  <svg viewBox="0 0 500 60" width="100%" height="100%" xmlns="http://w3.org">
    <text x="50%" y="70%" font-family="sans-serif" font-size="40" font-weight="bold" fill="#333" text-anchor="middle">
      Title
    </text>
  </svg>
</div>

Is there a foolproof, all-ereader method for scaling text to fit a window size? NB: I don't want to make the title an image.

[JSWolf]

Try %. All screens are 100%. Do not use rem or vw as they are not backwards compatible.

[Evil Overlord]

Originally Posted by JSWolf

Try %. All screens are 100%. Do not use rem or vw as they are not backwards compatible.

Thanks. Can you clarify what you mean? I assume [font-size: X%;] would set the title font to a percentage of the default or parent font, whereas what I'm looking for is % of the window size.

[JSWolf]

Scaling the font size is a really bad idea. The problem is that if you are using a small screen such as a cell phone, the text could wrap where it would not otherwise.

Why do you want the title page to take up 80% of the screen? Why not just a regular title page?

By suggesting using %, I was thinking of the space between elements.

[DNSB]

I've played with this a couple times. The main issue that I ran into is that many of the prettier techniques are not supported widely across multiple renderers.

The last solution I used which worked for a specific situation involved using a container-type inline-size and the font size set to 6cqw. I've attached a sample ePub using that technique.

Edit: This method works on Sigil's preview and EpubJSReader plugin. The BibiReader and ReadiumReader plugins display the text but the resizing does not work. For calibre, the ebook-viewer and the ebook-editor's preview work happily. One item to remember is both Sigil and calibre are basically using a Chrome web browser to display the text.

[RbnJrg]

All ereaders? Epub2 and epub3 ones? The only way is to employ an image and give the image a widh of 80%. For example:

<h1 class="first" title="My title"><img class="title" alt="My title" src="../Images/Mytitle.svg"/></h1>

and

.first {
   text-align: center;
   margin: 1em 0;
}

.title {
   width: 80%;
}

The key in THIS case is not use a svg wrapper but a <img> tag. And the svg must have paths, not text. Watch the epub I attach. It works everywhere.

[DNSB]

Originally Posted by RbnJrg

All ereaders? Epub2 and epub3 ones? The only way is to employ an image and give the image a width of 80%. For example:

That would be my first choice but the OP specifically stated they did not want to make the title an image.

[RbnJrg]

Originally Posted by DNSB

That would be my first choice but the OP specifically stated they did not want to make the title an image.

You're right, but since the OP used an SVG wrapper and the solution I posted uses an `<img>` tag with the text converted to a path, it might be a valid option for him. There's no other way to make a title occupy 80% of the viewport width, be immune to changes in text size by the user, and work under both EPUB2 and EPUB3.

[icearch]

I do not suggest anyone employ anything related to vertical position/scaling ie. vertical centering / % to height etc.

It can't even work properly in Sigil, let alone any random e-readers.

Talking about this, I have a question: if someone use scrolling mode in reader apps, how is height % determined? Is it % to screen height or to the whole file length?

[JSWolf]

Originally Posted by icearch

I do not suggest anyone employ anything related to vertical position/scaling ie. vertical centering / % to height etc.

It can't even work properly in Sigil, let alone any random e-readers.

Talking about this, I have a question: if someone use scrolling mode in reader apps, how is height % determined? Is it % to screen height or to the whole file length?

This IMHO is a bug in QT that the calibre viewer uses. % should work.

[RbnJrg]

Originally Posted by icearch

I do not suggest anyone employ anything related to vertical position/scaling ie. vertical centering / % to height etc.

Why? Vertical centering works fine under epub2 and epub3; the problem are due in how percentages are handled in relation to height, which is very different from how they are handled with respect to width (I have posted something about that). And in EPUB3, vertical centering is a piece of cake, since it's done by giving an element the property "display: flex".

It can't even work properly in Sigil, let alone any random e-readers.

Vertical centering works fine in Sigil. And in Sigil you can employ the advantage, as I said, of the property "display: flex".

Talking about this, I have a question: if someone use scrolling mode in reader apps, how is height % determined? Is it % to screen height or to the whole file length?

That's why vertical centering isn't working for you, because you don't understand how the "%" works in that situation. You first have to set a height for the parent element, the element containing what you want to center vertically. The problem arises because if you want to use "%", you first have to give a height to the body element, and that limits the content of the entire .xhtml file. When vertical centering is for a single page (for example, the title or cover page), there aren't major problems; you can handle it, for example, with:

html, body {
  height: 100%;
  margin: 0;
}

body {
  background: blue;
  position: relative;
}

.vcenter {
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2em;
  font-weight: bold;
  text-align: center;
}

and

<body>
  <div class="vcenter">This text is centered</div>
</body>

Change the font size (for example, to 5em)to watch how vertical-centering works. OTOH, the problems disappear under epub2 if other units of measurement are used instead of "%" (for example, "px"):



In the above examplo I use "px" for font-size but is the same if you use "em". Also I used inline styling to have the xhtml code and the css in the same screen but is better to employ classes

And remember, vertical centering is regarding the height of the containing block.

[icearch]

I see, thanks for your explaination. I will try them later.