[More quick guides]

A quick guide to
textfitting headlines
in Prince 14

A fitting solution for your next slogan

Prince is a HTML-to-PDF-via-CSS converter. CSS is good at setting font sizes, but not so good at guessing what the font size must be to fill a page. This is known as textfitting, or copyfitting, and the technique is commonly used in designs where a simple message must be presented at maximum volume. Like, in posters. In this guide we show how to achive such designs in Prince 14.

A headline

We start with the simplest document, with only one element and one word:

html@import url(https://fonts.googleapis.com/css2?family=Smokum);

h1 { font: 30pt/1 Smokum, sans-serif; text-align: center }
...
<h1>WANTED</h1>

To catch criminals, we need bigger fonts! We could increase the font size from 30pt, but it's hard to know what the maximum size is. It's easier to let a script do the job.

Adding the script

To enable textfitting, two script elements are added to the document along with calls to the textfit() function.

html<script type="text/javascript" src="https://princexml.com/howcome/2021/guides/charms.js"></script>

<body onload="textfit('h1')">
<h1>WANTED</h1>

Dead or alive

The textfit() function takes a selector as argument. A comma-separated list of selectors is also handled:

html<body onload="textfit('h1, h2.deadoralive')">
<h1>WANTED</h1>
<h2 class=deadoralive>DEAD OR ALIVE</h2>

My own slogan

By default, the text on a line will be given a font-size so that full width of the line is filled.

html<body onload="textfit('h1, h2, h3')">
<h1>MY</h1>
<h2>OWN</h2>
<h3>SLOGAN</h3>

An optional second argument to textfit() allows you to specify the width that the textfitted element should use. The second argument is a number, which is a percentage of the full width:

html<body onload="textfit('h1, h3'); textfit('h2', 20);">
<h1>MY</h1>
<h2>OWN</h2>
<h3>SLOGAN</h3>

Even fonts

A third optional argument to textfit() makes it possible to have the same font size on all lines of an element. To see the usefulness, first consider this example:

html<body onload="textfit('h1');">
<h1>The<br>Catcher<br>in the Rye</h1>

It can be argued that the word The is give too much attention in the sample above. Here is the same document with an added even argument:

html<body onload="textfit('h1', 100, 'even');">
<h1>The<br>Catcher<br>in the Rye</h1>

When even is specified, the textfitted font size of the longest line is used on all lines of the element.

Constrained boxes

Textfitting also works in elements that are constrained in width, like this <div> element:

htmldiv { 
  font: bold 1em/1 Bebas Neue; 
  width: 7cm; 
  color: white; 
  background: red; 
}
...
<body onload="textfit('div');">
<div>Free!</div>

Think inside the box

Here's a classic Mark Twain quote, combined with a mouthful of typography which will delight your printer:

html.the { 
   font: 1em/1 Six Caps, cursive;
   text-transform: uppercase;
   background-image: 
      linear-gradient(0deg, black, black 30%, 
      white 30%, white 35%, black 35%, black 40%, 
      white 40%, white 45%, black 45%, black 50%, 
      white 50%, white 55%, black 55%, black 60%, 
      white 60%, white 65%, black 65%, black 100%);  
}
.the .textfit { background: black; padding: 0 0.2em; }

The code for the example above is relatively complex and we only show the CSS code for the first line above. The stylesheet for the first word (THE) uses background-image to create a background with four white stripes.

To avoid that the four white stripes are visible behind the text, we have added a black area around the word THE. This is done in the last rule above; the textfit class matches a span element which is not found in the HTML source code, but which the script generates.

Multipass

Textfitting in Prince relies on the multipass feature, which formats the document several times. Between each run, a script can modify the document to improve layout. These scripts do amazing things in Prince, but will not work in browsers.

2021-01-06 HÃ¥kon Wium Lie