web counter
OneLiner – Resizing Text in RapidWeaver
My Image

All the latest RapidWeaver Stacks reviewed,
plus the most important community news …

Stay up to date with current RapidWeaver developments

OneLiner – Resizing Text in RapidWeaver

Setting Headline sizes can be frustrating. What looks good on a large screen will often add unwanted line-breaks on mobile devices. There are a couple of stacks that allow you to set responsive sizes for different breakpoints, but again, what looks great on an iPad can look terrible on an Android tablet.

Jeroen (Marathia's Stacks) also became frustrated when formatting single lines of text for responsive sites. The result of his frustration: OneLiner.

OneLiner is a stack that allows you to set the width of a line of text to appear just as you want it on any screen. OneLiner's default setting will allow your text to fill its container width, however, it also has settings that allow you to define exactly which percentage of the container your text should fill. Example: Three single lines of text.

Marathia - OneLiner

Now if you analyse at this text, you're going to notice that the second and third lines of text are going to appear much too small on a mobile phone to be legible.
For this reason OneLiner allows you to override its' settings above, or below a set breakpoint and define a fixed text size.

Marathia - OneLinerIn this second example, I have set OneLiner to display the second line of text at 18px on mobile phones and the third line at 16px.
Instead of shrinking to fill the container width, the text now displays at a set size that is legible. Line-breaks appear within the text as soon as a word no longer fits on a line.

OneLiner also has further useful settings. Obviously, you can set h1–h6 and paragraph tags for your text, but you can also override the text formatting entirely by setting the font, font colour and alignment.

Stack settings

Tag – None (div) – (default) h1– h6
Set Custom Text Style – Bold, Italic, Underline
Align – Left, Centre, Right
Set Spacing – Letter, Word, Line
Font Family – Theme Default, Web Safe Fonts, Custom
Capitalise – Normal, All Upper Case, Initial Caps
Size Correction – Text width in %

Advanced Settings
Disable – Small Screen, Large Screen
Max Screen Width – Breakpoint
Align – Justification above/below disabled settings
Fixed Font Size – Above/Below disabled settings
Content – Custom, Site Slogan, Site Title, Site Footer

OneLiner is a cool stack that solves the frustrating problem of headline sizes elegantly and quickly.

blog comments powered by Disqus

Links to the developers ® All trademarks cited on this page are the property of their respective owners.

Subscribe to Ninja News
or ask a question

Hi, I’m the Ninja Bot. What’s your name?
image/svg+xml
Nice to meet you, [1-1]. Could you tell me your mail address?
image/svg+xml
[1-1], would you like to subscribe to the monthly Ninja Newsletter?

Yes, I would like to receive your monthly newsletter.

No thanks, I’m good for now. I have a different issue.

image/svg+xml
Thanks for your support, [1-1]. Is there anything else I can do for you?
image/svg+xml

[1-1], thanks for subscribing. If you made a further request, I’ll get back to you – typically within 24 hrs.

image/svg+xml
Name: [1-1] [1-2]
Email; [2]

Contacted you via the Siphon form at Ninja News.

I would like to subscribe to the Ninja Newsletter

Message

[4]
I’m sorry tohear that, [1-1]. How may I help you then today?
image/svg+xml

[1-1], thanks for contacting me. I’ll review your mail, and get back to you – typically within 24 hrs.

image/svg+xml
Name: [1-1] [1-2]
Email; [2]

Contacted you via the Siphon form at Ninja News.

I don’t want to subscribe to the Ninja Newsletter right now.

Message

[6]

Thanks again for contacting us. Your request was successfully submitted.

My Image

Looking for Inspiration?

Looking for Inspiration for a new site, or need a CTA
really quickly?

Contact Information

rjh logo

rjh web design

265 Moo 2
Mae Na Toeng Nai, Pai
Mae Hong Son
Thailand 58130

About Us

We design websites and print-products for small businesses at reasonable prices. We specialise in Responsive Web Design.

Legal

This site uses Cookies to determine the best method of display in combination with your browser.
We do not harvest or sell personal information.
© rjh web design 2010—17

Powered by rjh-design

This website was built with loving care on a Mac using Foundation. For more information, contact me.

Don’t miss a post!

Sign up for our monthly newsletter.

A monthly digest of all the latest updates from our RapidWeaver blog, keeping you up to date with the hottest new stacks and themes.

View previous campaigns.

Subscribe to the Ninja Newsletter

* indicates required