Using Transparent Text

My most-often use for transparent text is for centering text. Let's suppose a headline needs to be centered without considering a note appended to it.

Here is a simple demonstration of a headline that is not centered the way I want it.

Who is
best? (Will!)

I don't want the "(Will!)" to be considered when centering the headline.

Here is the code for the above. As we go along, you'll see changes to this code.

<h1 style="text-align:center;">
Who is<br>
best? 
<span style="font-size:60%; font-weight:normal;">(Will!)</span>
</h1>

To center that last line, the text on the right also needs to be prepended on the left to balance the line.

Who is
(Will!) best? (Will!)

But that doesn't look nice. Here's the source code so you can follow along with the changes.

<h1 style="text-align:center;">
Who is<br>
<span style="font-size:60%; font-weight:normal;">(Will!)</span>
best? 
<span style="font-size:60%; font-weight:normal;">(Will!)</span>
</h1>

To make it look nice, we'll use transparent text on the left.

Who is
(Will!) best? (Will!)

Yes, that is what I want. See:

<h1 style="text-align:center;">
Who is<br>
<span style="color:transparent; font-size:60%; font-weight:normal;">(Will!)</span>
best? 
<span style="font-size:60%; font-weight:normal;">(Will!)</span>
</h1>

The second line of the header appears to be centered without considering the note appended to it.

HTML symbols can also be published transparent. Here is a quick example with arrows.

→ Who is
best? ←

With balancing arrow symbols:

→ Who is →
← best? ←

With transparent balancing arrows:

→ Who is →
← best? ←

Here is the HTML code for the above three examples.

<h1 style="text-align:center;">
&rarr; 
Who is
<br>
best?
&larr;
</h1>

<h1 style="text-align:center;">
&rarr; 
Who is
&rarr;
<br>
&larr;
best?
&larr;
</h1>

<h1 style="text-align:center;">
&rarr; 
Who is
<span style="color:transparent;">&rarr;</span>
<br>
<span style="color:transparent;">&larr;</span>
best?
&larr;
</h1>

Now you have another skill. For centering, a technique is to use transparent balancing text or symbols. The balance stays in play even with font size changes.

(This content first appeared in Possibilities newsletter.)

Will Bontrager