The the text on my Blocks page is strange.

The quick answer is that Blocks tries to resize the fonts and line spacing when it detects that the text would overflow the bounds of its block. This can happen when your theme applies a font that is a bit larger than the font used in RapidWeaver's edit mode.

The detailed answer is a bit more interesting.

The Problem: The fonts that your viewer sees depend on:

  • the content and what styles you apply
  • the font of your theme
  • the fonts available on the OS the viewer is using
  • the default fonts for the browser the viewer is using
  • the preferences set in the browser

Those are a lot of variables. The result? It's almost impossible to predict exactly how your text will look to the user. That in itself is not a problem, but when combined with fixed-position and fixed-size blocks in your layout the text can easily overflow the bounds of the blocks. This can lead to illegible pages, ugly layout, and browser compatibility problems.

The Solution: Lots of tools!

Instead of trying to implement a one-size-fits-all solution, Blocks gives the you a variety of tools to use to solve the problem for your specific layout, as well as a nice default that works about 90% of the time. Here's a quick rundown of each setting along with the pros and cons.

The Overflow Settings

Look in the Block Inspector window, in the Content section, in the Text tab.

Text Overflow: Hide

Hide is the default setting. With this setting selected, Blocks clips the content of the block to the bounds of the block. This ensures that when all else fails all the content stays within the block.

  • Pros: Always works, even when Javascript is disabled, and ensures IE compatibility.
  • Cons: When fonts get VERY large, hiding the overflow can cause significant amounts of the content to become invisible or illegible. This particular disadvantage is made less a problem when paired with automatic resizing (see below).

Text Overflow: Show

If you don't mind the content overflowing the bounds, you can choose to always have the content displayed.

  • Pros: The content never gets hidden.
  • Cons: This causes IE rendering problems when the content does overflow.

Text Overflow: Scroll

When you have a lot of content for a small space, you can choose to have a scrollbar in the block so the content can be scrolled. There are two scrollbar settings: Always show and When needed. When "Scroll - Always show" is selected, your block will always have a scrollbar regardless of whether the content overflows. When "Scroll - When needed" is selected, the block will only have a scrollbar if the content overflows the block.

  • Pros: An interesting interface feature.
  • Cons: Scrollbars are different on each browser and each OS.


Autoresizing of the font is enabled by default with the "Shrink font until content fits" checkbox. Autoresizing attempts to detect the font size that is being displayed on the viewers browser and resize the text so that it just fits inside the bounds of the block. This setting is only functional if Javascript is active in the viewer's browser, which is true for the vast majority of users. But just in case Javascript isn't active, when you choose to Shrink font until content fits", it is best to also choose "Hide" for the Text overflow, mainly to ensure that the page will not suffer in IE.

  • Pros: In about 95% of the cases this is exactly what you'd like to do -- make the content fit in the block. This setting produces IE-compatible pages. It's always legible. It maintains your layout.
  • Cons: Requires Javascript to be active. When one block is autoresized and other similar blocks are not it can lead to inconsistent rendering.

Stretch to Fit

Look in the Block Inspector window, in the Block section, in the Layout tab.

"Stretch height to fit content" assumes that the block size is allowed to change rather than the default behavior of keeping the block size fixed and dealing with the overflow. If this checkbox is selected, the block will grow downward as the font size increases. -Pros: No overflow problems at all. -Cons: The block may bump into other things on your page, such as other blocks and the bottom of the content area. Those collisions may mean that the content is illegible.

Related Issues

Things to consider if you're still having problems.

Make sure the width of your text block is not too wide for your theme. For example, do not set the block to be something close to the entire width of a theme if you need to allow space for the sidebar.

Blocks works with a fixed-size page layout. This means that you need to set your page size to match your theme and then keep your blocks in that area. Otherwise you'll notice odd layout behavior (like clipping) as the content starts to overflow the edges of the page

Have more questions? Submit a request


Article is closed for comments.
Powered by Zendesk