Continuing our quick tips for “Text Mods Month” I’ll show you how to fix the line height issue with the [small] WA tag.

What we’ll cover:

Fixing [small]’s line height – Journeyman +
A container alternative to [small] – Grandmaster +

Fixing [small]’s line height – Journeyman +

When I’d use the [small] tag and have text that wrapped to the next line, the line height was huge, which bugged me. I found the reason and solution on stackoverflow. Text’s line-height can’t be smaller than its parent ‘div’ (container).

In the image below you can see in the red box that the spacing is huge for the text size. But in the cyan box, it’s more suitable for it’s text size.

Here’s a fix that all guild members can use.

The CSS

This will affect every [small] tag.

.user-css small {
   display: inline-block; /* This is the magic - you make a new 'div' with this, 
      which allows us to make a smaller line-height. 'display: block;' can also be used. */
   font-size: .6em; /* The size of the text. I put it in terms of em - size relative 
      to my font. I wanted it quite a bit smaller than my regular text. */
   line-height: 1.5em; /* The size of the text lines. I put it in terms of em - size 
      relative to my font. I wanted a fair amount of space to read that small text. 
      (Extra space helps older eyes with bifocals. I speak from experience on this one.) */
}

The WA code

[small]Small text example where 'small' tags were modified with css.
cat mojo cat fur is the new black wake up wander around the house making large 
amounts of noise jump on top of your human's bed and fall asleep again sniff 
catnip and act crazy i like big cats and i can not lie.[/small]

A container alternative to [small] – Grandmaster +

The CSS

Instead of changing the WA tag [small], we can add our own for more text sizing and spacing options. What I like about this option is you can have a .small-text class, a .medium-text class, a .big-text class, and so on. The notes for the CSS attributes are the same.

.small-text { 
   display: inline-block;
   font-size: .6em;
   line-height: 1.5em;
}

The WA code

[section:small-text]Small text with my own 'small-text' 'section' class.[/color] 
Carefully drink from water glass and then spill it everywhere and proceed to lick 
the puddle meeeeouw meow hiding behind the couch until lured out by a feathery 
toy sleep on keyboard. Run in circles. [/section]

You can use either [container] or [section] WA code tags for this.