Although plenty of responsive text stacks exist already, some have potentially nasty flaws in how they work. Likewise some involve ridiculously complicated settings and bewildering mathematical calculations to get things correct! ViewportText is just a really simple stack element anybody can pickup and use. This stack is pure CSS / HTML and does not have a heavy dependency on Javascript and other client-side markup. It'll work perfectly in all newer web browsers, and degrade gracefully in older web browsers that lack viewport scaled text support.

A bonus feature of the ViewportText stack is an ability to apply text sizing to content placed inside the ViewportText stack or ability for text sizing to take effect on just about any other elements in your page (including elements like page navigation links, titles, slogans, headings, image captions, video descriptions, sidebars or footers).

As you would expect, multiple ViewportText stacks can be safely used on the same page. ViewportText stacks can also be @imported into non-Stack page types using the popular PlusKit plugin (not included).

Example

Here is a working example of the ViewportText stack. Resize your desktop web browser window using the drag handle in the bottom right corner.
 

I remain a single line of text on all screen sizes

Setup

Follow these instructions to get the ViewportText stack setup in your website. The ViewportText stack is compatible with both RapidWeaver 5 and RapidWeaver 6, although you may find the previewing options in RapidWeaver 6 make setup of the stack easier.

  1. Once installed on your computer in RapidWeaver, drag and drop a copy of the ViewportText stack into a stacks page, or add a new stacks page to your project (if you don't really have one)
  2. Drag and drop a Styled Text or HTML Code stack into your ViewportText stack. Enter the desired heading or content you wish to display on your page
  3. Switch RapidWeaver to preview mode and reduce the width of your page down to mobile width (indicated as 'iPhone' width in RapidWeaver 6)
  4. Keep toggling between preview and edit modes, while adjusting the Scale Amount setting. Adjust the scale amount until your text fits comfortably within the page container or another container on your page
  5. In the stack settings, adjust the Stop Point. This is the maximum screen width at which text scaling should stop scaling-up. The idea of the setting is to prevent text becoming too over-sized on wider screens. You can set the stop point to your theme width or a custom width
  6. At the point where the stop point is surpassed and text no longer scales up in size, you will need to set a maximum size of the font. You can either do this 'by eye' or use the web inspector built into RapidWeaver preview (enabled in the preferences) to see what the calculated font size is immediately before your stop point
  7. The final step (which might be required) is to adjust the line height setting. This overrides any line heights your applied RapidWeaver theme may already be applying to headings or body content

Optional settings

The ViewportText stack includes a few optional settings which might be of help to you:

  • The Fallback Size is the font size applied in older web browsers which do not support viewport scaled text. Commonly this relates to web browsers at the older end of the spectrum like Internet Explorer 7, Internet Explorer 8, Internet Explorer 9 and 'ancient' versions of Safari, Firefox etc.
  • Print Size sets the font size on print / PDF output. Commonly visitors to your website would like to print or save pages as PDF; so it's important they get a satisfactory print output. This setting will let you adjust the font size on print and PDF output.
  • Animation will give your text a slightly delayed scaling animation effect, when the web browser changes size or orientation. This setting only works in newer web browsers and should be considered 'experimental'.

Text styling

When copying and pasting content into the ViewportText stack, take care that rich text formatting is not already applied to your content. This will otherwise override the CSS markup that ViewportText users, and could prevent your font size or line height preferences taking effect. Get into the habit of pasting content into pages as plain text (CMD + ALT + V) to try and clear-away any inline styling or formatting that might already be applied to your content.

Theme compatibility

ViewportText is compatible with all ThemeFlood themes, and should work with some themes by other developers too.
 

Contribute

If you find this stack element useful in your personal or commercial web projects; please consider making a small contribution towards ongoing support and updates. There are many different ways you can contribute to the Stacks4Stacks project, and benefits for doing so.
Bookmark or share this page
Baidu 百度
Blogger
Delicious
Digg
Facebook
Google+
LinkedIn
LiveJournal
MySpace
Одноклассники
Reddit
Renren 人人网
StumbleUpon
Tumblr
Twitter
ВКонтакте
Weibo 微博
XING
Contact Us
Email This Page
Print This Page
PS: This bookmarking and sharing popup is powered using our brilliant SocialPopup stack!

Cookies

Like a lot of websites, Stacks4Stacks uses cookies to help enhance your browsing experience and handle things like purchases. We take your privacy seriously, and welcome you to freely opt-out of nonessential cookies at any time by reviewing your preferences on this page.