Text Alignment

The Chessmaster of Words

Text alignment, hyphenation, and dividing lines are like the moves in a grandmaster’s chess game, where every word is strategically placed. Aligned to the left, like the reliable pawn, it holds its ground as the default position. Centered, like the king commanding the board, it draws all attention to itself. Aligned to the right, like the graceful queen, it adds finesse and elegance to the edges of your text.

Hyphenation plays the role of the knight, leaping deftly over gaps and ensuring a smooth reading experience. And then there’s the dividing line, the rook, firmly marking sections and enforcing clear boundaries. With these moves in your arsenal, your text will not only be harmonious but a tactical masterpiece worthy of applause.

Let’s Keep Going

Alignment
Justification
Hyphenation

Divider Line
Text Wrapping and Balance

Perfect Text Arrangement

Align, Divide, Balance — So Your Text Always Looks Good.

Alignment

The Arrangement of Words

Text alignment acts as the conductor of your words. Left-aligned provides a steady foundation, right-aligned whispers a touch of creativity, and centered bestows your lines with an air of authority and significance.

h1 {
    text-align: center;
}

This property assigns positions to text. The value left (default) for left alignment, center for centering, and right for right alignment.

Justification

Words in Perfect Formation

In justified text, words march in perfect alignment, both left and right. This strict, orderly arrangement creates a formal, respectful impression where no word dares step out of line.

p {
   text-align: justify;
}

Your text will now be displayed in justified alignment.

Hyphenation

The Breathing Spaces of Words

Hyphenation ensures that long words are neatly broken into manageable chunks. Like catching your breath mid-run, it helps maintain the flow of reading while avoiding unsightly gaps in the text.

p {
    hyphens: auto;
}

The hyphens property enables hyphenation and requires the language to be specified in the HTML tag e.g., <html lang=”en”> .

Divider Line – Horizontal Rule

The Stylish Boundary

With CSS, the humble <hr> element transforms into an elegant line, acting as an invisible barrier to separate your sections. You can customize its color, thickness, and style to add a touch of depth and structure to your page.

hr {
    border: none;
    height: 20px;
    background-color: red;
}

border: none; removes the default border. height: 2px; sets the line’s height. background-color: red; changes the line’s color.

Text Wrapping and Balance

Harmonious Text Styling

With text-wrap: balance;, your text gracefully spreads across multiple lines, creating a visually balanced appearance. But if you prefer something flowing and smooth, opt for text-wrap: pretty;. It prevents orphaned words from lingering alone at the end of a line, ensuring an elegant and continuous text flow.

.balance {
    text-wrap: balance;
}

.pretty {
    text-wrap: pretty;
}

While balance evenly distributes text across lines, pretty keeps the text fluid, avoiding single words at the line’s end. However, be aware that pretty still has limited browser support.

In this lesson, you have learned…

How to use text-align to align text left, center, right, or justify it for structured presentation.
Why hyphens: auto ensures proper hyphenation to avoid awkward gaps in justified text blocks.
How to create a stylish dividing line with <hr> and CSS to elegantly separate sections.
Why text-wrap: balance and text-wrap: pretty help to distribute text harmoniously and avoid awkward line breaks.

Here you can see the code you’ve practiced – but feel free to experiment! Try out changes, test new ideas, and see what happens. This is your space for tinkering!

The Paths of Words

In Greenwood Hollow, ancient scrolls twist, flow, and align themselves as if perpetually debating where they truly belong. To decipher these mystical inscriptions, you must tame the text, ensuring it doesn’t scatter in all directions. Align your lines like a well-structured fairy tale, gracefully dancing in perfect harmony. With CSS, you can discipline the text, unlock the paths of words, and keep them from vanishing into chaos.

Your Task: Apply Text Alignment and Hyphenation

Create a Style for the .container Class:
- Set the container’s maximum width (max-width) to 400px.
- Center it using margin: 0 auto;.
Text Alignment (text-align):
- Assign the left, center, and justify values to the .left-align, .center-align, and .justify-text classes, respectively.
Hyphenation (hyphens):
- Add the hyphens: auto; property to the .hyphenated class to enable automatic hyphenation, based on the language set in the <head> section.
Customize the Divider:
- For the .divider class, apply:
  border: none; height: 20px; background-color: darkgreen;
  This will visually distinguish the divider.
Text Wrapping and Balance:
- Experiment with the following properties:
  text-wrap: pretty; text-wrap: balance; text-wrap: normal;
- Observe how each affects the text flow and balance.

Open Visual Studio Code and make these words appear on the page. Or try it right here in the editor!

Open Editor in a New Tab

CSS

.container {
    max-width: 400px;
    margin: 0 auto;
}

/* Left-align is default */

.center-align {
    text-align: center;
}

.right-align {
    text-align: right;
}

.balance {
    text-wrap: balance;
}

.justify-text {
    text-align: justify;
}

.hyphenated {
    hyphens: auto;
}

hr {
    border: none;
    height: 20px;
    background-color: darkgreen;
}

Let’s Keep Going