xmeter/css/src/_h-Measure.less

A default stylesheet with a set of tools that make designing with vertical rhythm easy.

/*################################*\
    xmeter  |  _h-Meaure.less
\*################################*/


// Measure
//
// The Measure Helper constrains an element’s inline-size
// (width, in horizontal writing modes) to a reasonable line length.
//
// The default style sets the max-inline-size of the block to 66 characters<sup>&lowast;</sup>,
// but there are narrow and wide variants for differing cases.
//
// The narrow variant is useful in mobile design when the user might want to
// zoom in on text. Reading text with too large a measure on mobile devices requires a lot of
// horizontal scrolling back and forth. Inversely, the wide variant is useful for
// large type when you might not want the text to wrap as often.
//
// Because the block is capped at a character length,
// this style is responsive to font-size. The bigger the font, the larger the line length
// can be before the text wraps. Try adjusting your browser’s font size to see the effects.
//
// <footer>
// <sup>&lowast;</sup>Note that 66 characters (and variants) are approximate measures,
// inspired by [<cite>Tachyons</cite>](https://tachyons.io/docs/typography/measure/).
// The actual number of characters in a line will depend on its content,
// if the font is a proportional font.
// Read [<cite>What is the CSS ‘ch’ Unit?</cite>](https://meyerweb.com/eric/thoughts/2018/06/28/what-is-the-css-ch-unit/) for more information.
// </footer>
//
// <header><dl>
//   <dt>author</dt>  <dd>Chris Harvey</dd>
//   <dt>updated</dt> <dd><time>2017-09-18</time></dd>
// </dl></header>
//
// Markup:
// <!--link rel="stylesheet" href="/node_modules/xmeter/css/dist/h-Measure.css"/-->
// <p class="h-Measure {{ modifier_class }}">If the measure is too short, the reader’s eyes
// have to dart back and forth more often, causing fatigue. If the measure is too long,
// the reader is more likely to lose track of the previous line.</p>
//
// .h-Measure--narrow - narrow variant constrains the size even tighter
// .h-Measure--wide - wide variant is not as constrained
//
// Weight: 5
//
// Styleguide Helpers.Measure
.h-Measure {
  max-width: 33em; // COMBAK{FALLBACK} for `ch` unit
  max-width: 66ch;
  @supports (max-inline-size: 1ch) {
    max-width: unset;
    max-inline-size: 66ch;
  }
}
.h-Measure--narrow {
  max-width: 22.5em; // COMBAK{FALLBACK} for `ch` unit
  max-width: 45ch;
  @supports (max-inline-size: 1ch) {
    max-width: unset;
    max-inline-size: 45ch;
  }
}
.h-Measure--wide {
  max-width: 45em; // COMBAK{FALLBACK} for `ch` unit
  max-width: 90ch;
  @supports (max-inline-size: 1ch) {
    max-width: unset;
    max-inline-size: 90ch;
  }
}