Skip to content

template-no-whitespace-for-layout.md

Latest commit

 

History

History
48 lines (33 loc) · 2.11 KB

template-no-whitespace-for-layout.md

File metadata and controls

48 lines (33 loc) · 2.11 KB

ember/template-no-whitespace-for-layout

💼 This rule is enabled in the 📋 template-lint-migration config.

Formatting of text through the use of multiple whitespace is entirely visual, and therefore is incompatible with screen-reading assistive technology tools.

The rule applies to the content of Handlebars AST TextNodes, and performs a RegExp search for two consecutive white space characters that might indicate the use of whitespace used for layout.

Examples

This rule forbids the following:

<template>
  Mon.&nbsp;&nbsp;&nbsp;&nbsp;Eggs&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Tomato soup&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;House salad<br>
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Bacon&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Hamburger&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Fried chicken<br>
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Toast&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Onion rings&nbsp;&nbsp;&nbsp;&nbsp;Green beans<br>
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Cookie&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Mashed potatoes
</template>

This rule allows the following:

<template>
  <p>Start to finish</p>
</template>
<template>
  <p>Start&nbsp;to&nbsp;Finish</p>
</template>

Migration

To fix issues caused by using whitespace for layout, the following are recommended:

  • use the appropriate HTML markup to contain the information
  • use CSS to add padding or margins to the semantic HTML markup

References