LineBreakHeight Stack

LineBreakHeight Stack

set the height between blocks of text separated with a return (<br>)

It is always a good idea to divide large chunks of text in smaller parts (paragraphs) by adding some whitespace between them to improve readability. In an ideal world, this would be achieved by wrapping each paragraph in <p></p> (Format > HTML > Paragraph) and use CSS (usually provided by the theme) to set the height of the space between the paragraphs. Another way would be to use a separate text stack for each part of the text, and set its bottom margin. Especially with long texts, both methods are a tedious job. Using Markdown makes things a lot easier, but is not something everybody enjoys using.

In practice many (most?) of us will simply use one or more returns to create the whitespace.

Whatever method you prefer, it will not be easy to control the height of the whitespace. Often the whitespace has the same height as every other line, which is not always aesthetically the best solution.

Here’s where the LineBreakHeight Stack comes in. This stack makes it possible to set the height of the whitespace exactly to your liking. Just use line breaks to separate the blocks of text, and set the height of each line break (as a percentage of the line height of the text).

Demo
no LineBreakHeight Stack:
line break height 25%:
line break height 50%:
line break height 75%:
Do you see any Teletubbies in here? Do you see a slender plastic tag clipped to my shirt with my name printed on it?
Do you see a little Asian child with a blank expression on his face sitting outside on a mechanical helicopter that shakes when you put quarters in it? No?
Well, that's what you see at a toy store. And you must think you're in a toy store, because you're here shopping for an infant named Jeb.
Do you see any Teletubbies in here? Do you see a slender plastic tag clipped to my shirt with my name printed on it?
Do you see a little Asian child with a blank expression on his face sitting outside on a mechanical helicopter that shakes when you put quarters in it? No?
Well, that's what you see at a toy store. And you must think you're in a toy store, because you're here shopping for an infant named Jeb.
Do you see any Teletubbies in here? Do you see a slender plastic tag clipped to my shirt with my name printed on it?
Do you see a little Asian child with a blank expression on his face sitting outside on a mechanical helicopter that shakes when you put quarters in it? No?
Well, that's what you see at a toy store. And you must think you're in a toy store, because you're here shopping for an infant named Jeb.
Do you see any Teletubbies in here? Do you see a slender plastic tag clipped to my shirt with my name printed on it?
Do you see a little Asian child with a blank expression on his face sitting outside on a mechanical helicopter that shakes when you put quarters in it? No?
Well, that's what you see at a toy store. And you must think you're in a toy store, because you're here shopping for an infant named Jeb.

Usage

Drag one or more stacks that can contain text into the drop zone of this stack and set the height of the returns. Optionally, you can override the line height of all text in the stack.

Need help using it on a non-stacks page? Here’s a tutorial.

N.B.
  • When using two returns between blocks of text, set the height to half the value you prefer!
  • Do not use the line height settings in the styled text pane. Use the option in this stack instead.
  • This stack sets the height of line breaks (<br>), not of paragraphs (<p></p>).
  • The line break height and line spacing will not show in Edit mode.

Limitations
With Javascript turned off, this stack will not work.

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

This stack requires the Stacks plugin by YourHead (version 3 or higher).
Do you like these stacks? Please consider leaving a review in the RapidWeaver Community’s Addons section [link].
LineBreakHeight Stack HUD
© 2012-2017 Marathia Web Design | Contact