ViewportText Stack

Post Series: Responsive Non-Breaking Text
  • 1.ViewportText Stack

At some point you will have a line of text on a responsive website, that you require to remain on a single line without breaking and carrying over to a new line. To date this has not been possible – but Will’s latest, free stack, ViewportText, now changes that. With ViewportText, you can set your text to scale up or down to fit the area it needs to adapt to.

Once you have dropped your text stack into ViewportText, it becomes responsive and will scale instead of breaking.

In the HUD, you can set the Scale Amount that the text is allowed to scale to. The standard setting is 7%. In the example above, the Scale Amount has been set to 3.5, to allow the text to scale down on a smartphone. We deliberately used a long line of text for testing purposes.The next setting in the HUD is the Stop Point, the viewport size at which the text will cease to scale up. You will hardly want to fill the width of a 30″ screen with your text?And just as an insurance, you may also set the Maximum Size of the text in pixels. We chose 42px and a Line Height of 1.3 em. The HUD also contains settings for the Print Size of your text and for a Fallback Size.The especially interesting thing about ViewportText, is that it can also scale other stacks on your page. If you set Apply To Custom Page Elements, you can enter multiple elements which will then be scaled up or down as need be.Setting the Scale Amount can involve a certain amount of trial and error, but if you need to keep your text on a single line, it’s worth the time invested. And what’s more, it’s free! You can take a look at ViewportText by visiting Stacks4Stacks where Will also has an explanatory video waiting for you.

Marten Claridge

Founder of RapidWeaver Central, Developer of WeaverThings, Author of Books, Marten's highly unique skillset has established him as a leading RapidWeaver, Web Design and Wordpress consultant with a worldwide client-list and highly dysfunctional sense of modesty.