OneLiner Stack

Oneliner Stack

display one line of text that adjusts its size to the width of its container

The Oneliner Stack is a responsive, lightweight solution to display a single line of text that will resize according to the width of its container. This line of text can be full width, but the width can also be a percentage of the width of its container.

Demos
Here’s an example of the Oneliner Stack with its default settings:
My Awesome Headline
Below is another example showing the site title, using many of the options provided by the stack (see fig. 1). Note that on small screens the text has a fixed size of 24px and is center aligned:
Marathia’s Stacks
The text does not have to be full width. Here’s an example of a line of centered text set to a width of 60%:
I’m 60% wide
When using several OneLiner Stacks below each other, you can create some nice effects as shown on demo page #1 and demo page #2.

Resize your window to see the stack in action!

Usage
Just enter some text in the text area of the stack – or choose to use the site title or slogan.
Optionally you can apply a heading (h1…h6) to the text to apply the styling by the theme, and for SEO reasons.
By default, the text will inherit the styling of the area it is displayed in as defined by the theme (except the font size of course). Use the options of this stack to overrule this styling.
Use the options disable on small screen/big screen to set minimum and maximum font size to the text.
With full width text, leave the align setting on center.

NB
Depending on the font and styling, the text may not always fit exactly in its container at certain screen widths. If necessary, adjust the text with the size correction in the slider. Usually, 99% (and center aligned) will do.
Use the letter spacing and word spacing options with caution:
Avoid combining underlined text with letter spacing or word spacing. It won’t look good in any browser.
The combination of letter spacing and word spacing often doesn’t look good either.
Especially in iOS, with full width text and word spacing the last character may be chopped off a little.
When applying letter spacing, browsers also add the spacing (incorrectly) after the last character. This does not look great with full width text. To compensate this error, the stack will put a space at the beginning of this text. This already looks better, but you may need to decrease the text width a few percent.
In Edit mode, this stack cannot show the actual size, but at least tries its best to show the other formatting and styling.

Background

Frustrated by the solutions available (not exactly working how I wanted, too many bells and whistles and thus heavy), I was looking for a lightweight solution that just works. The WideText jQuery Plugin by Chris Bavota ticked all the boxes for me, so I decided to base this stack on his plugin.

Limitations
When the visitor has JavaScript disabled in his browser, the text inside the stack will not be responsive.
The font family must be set in the stack. The Web Safe Fonts option in the Format menu item of RapidWeaver does not work.
The Text Formatting options of the stack’s Text HTML area may not always work. Use the options provided by the stack instead.
Due to rounding differences, text with a width set 100%, may look a little too small with certain screen widths. The smaller the screen, and the longer the text, the more likely it is that this may happen.
When the text is initially hidden, and only shows when the visitor clicks an element (like Foton and Outline by ThemeFlood), this stack usually does not work. The Oneliner Stacks calculates the fonts size using the width of its container, but hidden objects don’t have a width.

Support
Please use this form to report all issues, questions and comments.

This stack requires the Stacks plugin by YourHead (version 3).
OneLiner HUD (click to enlarge)
fig. 1
© 2012-2017 Marathia Web Design | Contact