Text alignment and spacing

Text Alignment and Spacing

Text alignment and spacing are core properties in CSS3 for controlling text layout. Proper alignment makes page structures clear, while appropriate spacing enhances readability. These properties may seem simple, but their practical application involves many nuances.

Text Alignment Methods

The text-align property controls the horizontal alignment of text within block-level elements. Common values include:

.left-align {
  text-align: left; /* Default value, left-aligned */
}

.center-align {
  text-align: center; /* Center-aligned */
}

.right-align {
  text-align: right; /* Right-aligned */
}

.justify-align {
  text-align: justify; /* Justified alignment */
}

Justified alignment is particularly useful for long paragraphs, as it aligns text to both left and right boundaries. Note that the last line may not be justified:

<p class="justify-align">
  This is an example of a justified paragraph. The text automatically adjusts spacing so that each line (except the last) fills the container width. This type of layout is common in newspapers and magazines.
</p>

Vertical Alignment Control

The vertical-align property primarily controls the vertical alignment of inline elements or table cell content:

.baseline {
  vertical-align: baseline; /* Default, aligns with the parent's baseline */
}

.middle {
  vertical-align: middle; /* Aligns the middle of the element with the parent's baseline plus x-height */
}

.sub {
  vertical-align: sub; /* Subscript */
}

.super {
  vertical-align: super; /* Superscript */
}

.top {
  vertical-align: top; /* Aligns the top of the element with the top of the line box */
}

This is particularly useful when mixing images with text:

<div>
  <img src="icon.png" class="middle"> This icon will be vertically centered with the text
</div>

Line Height and Spacing

The line-height property sets the distance between lines (line height) and accepts unitless values, length values, or percentages:

.compact {
  line-height: 1.2; /* Recommended to use unitless values relative to the current font size */
}

.spacious {
  line-height: 1.8;
}

.fixed-height {
  line-height: 24px; /* Fixed pixel value */
}

Example showing different line heights:

<p class="compact">Text with tight line spacing...</p>
<p class="spacious">Text with loose line spacing...</p>

Letter and Word Spacing

letter-spacing and word-spacing control the space between characters and words, respectively:

.tight-letters {
  letter-spacing: -0.5px; /* Reduced character spacing */
}

.loose-letters {
  letter-spacing: 2px; /* Increased character spacing */
}

.normal-words {
  word-spacing: normal; /* Default spacing */
}

.wide-words {
  word-spacing: 0.5em; /* Increased word spacing */
}

Practical example:

<h2 class="loose-letters">Heading with increased letter spacing</h2>
<p class="wide-words">This paragraph has intentionally increased word spacing.</p>

Text Indentation

The text-indent property defines the indentation of the first line of text in a block-level element:

.indented {
  text-indent: 2em; /* First line indented by 2 characters */
}

.hanging-indent {
  text-indent: -2em; /* Hanging indent */
  padding-left: 2em; /* Used in combination to achieve the hanging effect */
}

Example of hanging indent:

<div class="hanging-indent">
  This text uses a hanging indent effect, where the first line protrudes to the left while the remaining lines maintain normal alignment.
</div>

Text Direction and Writing Mode

The direction and writing-mode properties control text flow direction:

.rtl {
  direction: rtl; /* Right-to-left */
  unicode-bidi: bidi-override;
}

.vertical-rl {
  writing-mode: vertical-rl; /* Vertical direction, right-to-left */
}

Example of vertical text:

<p class="vertical-rl">
  This text will be arranged vertically
</p>

Whitespace Handling

The white-space property controls how whitespace inside an element is handled:

.nowrap {
  white-space: nowrap; /* No line breaks */
}

.pre {
  white-space: pre; /* Preserves whitespace, similar to the <pre> tag */
}

.pre-wrap {
  white-space: pre-wrap; /* Preserves whitespace but allows automatic line breaks */
}

.pre-line {
  white-space: pre-line; /* Collapses consecutive whitespace but preserves line breaks */
}

Code display example:

<div class="pre">
  The whitespace in this text    will be preserved,
  and line breaks will also be preserved.
</div>

Text Decoration and Transformation

Though not strictly related to alignment and spacing, text-decoration and text-transform are often associated with typography:

.underlined {
  text-decoration: underline wavy red; /* Wavy underline */
}

.uppercase {
  text-transform: uppercase; /* All uppercase */
}

.capitalize {
  text-transform: capitalize; /* Capitalizes the first letter of each word */
}

Multi-Column Text Layout

column-count and column-gap enable multi-column text layouts:

.multicol {
  column-count: 3;
  column-gap: 2em;
  column-rule: 1px solid #ddd;
}

Practical application:

<div class="multicol">
  This text will be divided into three columns with 2em spacing and a 1px divider between them.
  Multi-column layouts are particularly suitable for displaying long articles on news websites.
</div>

Responsive Text Spacing

Combine with media queries for responsive text spacing:

.responsive-text {
  line-height: 1.4;
  letter-spacing: 0.5px;
}

@media (min-width: 768px) {
  .responsive-text {
    line-height: 1.6;
    letter-spacing: 0.8px;
  }
}

Text Shadows and Outlines

text-shadow can add visual effects that indirectly affect perceived spacing:

.shadowed {
  text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.multi-shadow {
  text-shadow: 
    1px 1px 1px #000,
    -1px -1px 1px #fff; /* Multiple shadows */
}

Practical Application Scenarios

Text alignment in navigation menus:

.nav-menu {
  display: flex;
  justify-content: space-between; /* Horizontal distribution */
  align-items: center; /* Vertical centering */
}

.nav-item {
  padding: 0 15px;
  line-height: 50px; /* Matches the navbar height for vertical centering */
}

Text alignment in form elements:

.form-group {
  margin-bottom: 1em;
  line-height: 2; /* Increased line height for better form readability */
}

.form-label {
  display: inline-block;
  width: 120px;
  text-align: right;
  padding-right: 10px;
}