Text Alignment and Decoration in CSS

What You Learn From This Page

• How text-align positions inline content inside a block container.
• When to use logical start and end instead of physical left and right.
• How justification behaves across widths, languages, and writing systems.
• How text-decoration line, style, color, thickness, and offset work together.
• How to design readable, accessible links and meaningful status treatments.
• How to debug alignment and decoration problems in responsive interfaces.

Introduction

Text alignment and text decoration solve two different typography problems. Alignment controls how inline content is distributed within each line box. Decoration draws visual lines such as underlines, overlines, and line-throughs around or through text. Because both affect the appearance of words, beginners often group them together, but their layout behavior, inheritance, accessibility implications, and practical uses are different.

A readable interface needs more than attractive text. Paragraphs require a stable starting edge, numeric columns should be easy to compare, links must remain recognizable, and a crossed-out price should communicate the correct meaning. CSS provides precise controls for all of these cases, but those controls work best when they support semantic HTML and the natural direction of the language rather than forcing every piece of content into one visual pattern.

The Core Difference

text-align answers the question, "Where should inline content sit inside its available line?" The text-decoration family answers, "Which decorative lines should be drawn, and how should those lines look?" Alignment can change the position or distribution of text without drawing anything. Decoration can draw a line without changing the text's basic alignment.

.intro {
  text-align: start;
}

.intro a {
  text-decoration: underline;
}

In this example, the paragraph follows the logical start edge of its writing direction, while links remain visually identified with underlines. The declarations cooperate, but neither substitutes for the other.

What text-align Controls

The text-align property controls inline-level content within a block container. Text nodes, inline elements, inline-block elements, and similar inline content participate in line boxes, and the browser aligns those line boxes according to the specified value. The property applies to the container, not directly to the physical shape of an individual glyph.

.message {
  text-align: center;
}

If the message contains text, a link, and an inline icon, those inline items are centered together within each line. The message element itself does not become centered in its parent merely because its text is centered.

Common text-align Values

The most familiar values are left, right, center, and justify. Modern CSS also provides logical values such as start and end, which adapt to writing direction. The initial value is start, and the property is inherited, so an alignment declared on a component can affect text throughout its descendants.

.start { text-align: start; }
.end { text-align: end; }
.left { text-align: left; }
.right { text-align: right; }
.center { text-align: center; }
.justified { text-align: justify; }

The best value depends on content purpose, writing direction, column width, and reading length. A value that works for a short heading may be unsuitable for several paragraphs.

text-align: left

left aligns inline content to the physical line-left side. In a conventional horizontal left-to-right English layout, that appears identical to start. However, left remains a physical choice even when the content direction changes, so it can conflict with the natural reading edge of right-to-left text.

.legacy-note {
  text-align: left;
}

Use left when the design genuinely requires the physical left edge. When the intent is "align with the beginning of this language's line," prefer the logical start value.

text-align: right

right aligns inline content to the physical line-right side. It can be useful for a numeric column, a timestamp region, or a deliberately right-positioned label. It should not be applied to long left-to-right prose merely to create visual novelty because the changing line starts make scanning difficult.

td.amount {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

For multilingual components, determine whether the requirement is physically right or logically at the end. If it is logical, end expresses the intent more accurately.

text-align: center

center places the inline content in the middle of each line box. It works well for short hero headings, dialog titles, empty-state messages, centered captions, and compact promotional copy. Centering creates symmetry, but each wrapped line begins at a different position, which removes the stable edge readers use to find the next line.

.empty-state {
  max-inline-size: 34rem;
  margin-inline: auto;
  text-align: center;
}

Notice that margin-inline: auto centers the block itself, while text-align: center centers its inline content. A complete component may need both declarations because they solve separate layout tasks.

Why Long Centered Paragraphs Are Difficult

Long centered paragraphs force the eye to search for a new starting point after every line. The effect becomes more pronounced when lines vary greatly in length or when user text spacing changes the wrapping. What looks balanced in a two-line mockup can become tiring with real content, translations, validation details, or help text.

Keep long-form reading content aligned to its natural start edge. Reserve centering for concise content whose shape remains easy to understand, and always test the longest expected copy at narrow widths.

text-align: justify

justify asks the browser to adjust text so that a line fills the available inline size. In many Latin-language layouts, browsers primarily adjust spacing between words. Other writing systems can use different justification opportunities. The final line normally remains start-aligned unless another property changes its treatment.

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

Justification can create a formal edge on both sides of a column, but the visual result depends on line length, font, language, hyphenation, and browser algorithms. It should be tested rather than selected solely because the edges look neat.

Risks of Justified Text

In narrow columns, a line may contain too few words to distribute space evenly. Large gaps then form between words, producing visible channels sometimes called rivers. These gaps interrupt phrase grouping and can make reading harder, especially for people with cognitive or visual processing difficulties.

If justification is required, use a comfortable measure, correct lang attributes, suitable hyphenation, and real production content. Disable it at narrow breakpoints when the column can no longer maintain an even rhythm. Start alignment is usually the safer default for responsive web articles.

Logical start and end Alignment

start aligns content with the start edge of the line, while end aligns it with the end edge. For left-to-right English, start normally appears on the left and end on the right. For a right-to-left language, those visual sides reverse. In vertical writing modes, the inline axis can also change orientation.

.article-copy { text-align: start; }
.metadata { text-align: end; }

Logical values describe purpose rather than a hard-coded screen side. They make components easier to localize and reduce direction-specific overrides.

start Versus left

left always names a physical line side. start depends on the element's writing direction and writing mode. They look the same in many English pages, which can hide the distinction until the component is translated or embedded inside a region with a different dir value.

Use start for paragraphs, form labels, messages, and other content that should follow the reader's natural beginning edge. Use left only when a physical left alignment is part of the requirement, such as an annotation tied to a fixed diagram coordinate.

end Versus right

The same reasoning applies to end and right. End follows the logical conclusion of a line, while right names the physical right edge. An amount column in a Latin-script financial report may genuinely require right alignment for visual comparison; a generic metadata component may instead need logical end alignment.

Documenting that intent prevents future developers from replacing a logical rule with a physical one simply because both happen to look identical in the current language.

Alignment and the dir Attribute

Language and direction are content concerns, not merely visual styles. Use the HTML dir attribute when content direction is known or supplied dynamically. Logical CSS alignment can then respond to that direction without duplicating component styles.

<p dir="rtl" class="message">...</p>

.message {
  text-align: start;
}

Avoid guessing direction from visual appearance or forcing it with alignment alone. Bidirectional content can contain names, numbers, and punctuation from different scripts, so semantic direction information matters to layout and assistive technology.

text-align Is Inherited

When a parent receives text-align: center, descendant block containers can inherit that alignment. This is convenient for a small self-contained banner, but it can accidentally center nested lists, form help, or long error text that should remain start-aligned.

.promo { text-align: center; }

.promo .terms {
  text-align: start;
}

Inspect the component tree rather than assuming the declaration affects only direct text. Reset alignment at meaningful boundaries when descendants have a different reading role.

text-align Does Not Center a Block

A common mistake is to apply text-align: center to a fixed-width panel and expect the panel to move into the middle of its parent. The property centers inline content inside the panel; it does not change the panel's own block position.

.panel {
  inline-size: min(100%, 36rem);
  margin-inline: auto;
  text-align: center;
}

Here the logical auto margins center the panel, and text-align centers its contents. Separating these responsibilities makes the CSS easier to reason about.

Text Alignment Versus Flexbox Alignment

Flexbox properties position flex items. justify-content works along the flex container's main axis, and align-items works along its cross axis. By contrast, text-align aligns inline content inside line boxes. A flex item can be centered as an item while its internal text remains start-aligned.

.dialog-actions {
  display: flex;
  justify-content: center;
}

.dialog-message {
  text-align: start;
}

Choose the property that matches the object being positioned. Using text alignment as a general layout tool produces fragile results when children become blocks or flex items.

Alignment in Tables and Data

Tables benefit from alignment that reflects the data type. Descriptive headings and names commonly align to start, while numbers often align to the decimal or end edge for comparison. Dates, codes, and status values should follow the conventions of the product and locale.

th { text-align: start; }
td.numeric {
  text-align: end;
  font-variant-numeric: tabular-nums;
}

Do not rely on alignment alone to communicate column meaning. Proper headers, captions, and table structure remain essential for comprehension and accessibility.

text-align-last

The text-align-last property controls the last line of a block and lines immediately before forced breaks. Its initial auto behavior generally leaves the final line start-aligned when the rest of the paragraph is justified. Other values can center, end-align, or justify that final line.

.formal-copy {
  text-align: justify;
  text-align-last: start;
}

Use this property sparingly. Forcing a short final line to justify can create extreme spaces that look disconnected from the paragraph.

text-justify

text-justify selects a justification method when alignment is justified. Values include auto, none, inter-word, and inter-character. Appropriate justification differs by language and writing system, so automatic language-aware behavior is often a sensible starting point.

.localized-copy {
  text-align: justify;
  text-justify: auto;
}

Browser support and rendering details should be tested for the product's target matrix. A declared method cannot compensate for incorrect language metadata or a column that is simply too narrow.

What text-decoration Controls

The text-decoration family draws lines associated with text. Common line types are underline, overline, and line-through. Modern CSS also controls style, color, thickness, underline position, offset, and whether an underline skips over glyph ink. These features make semantic-looking link treatments possible without imitating underlines with unrelated layout properties.

a {
  text-decoration: underline;
}

Decoration changes presentation. If the line communicates deletion, inaccuracy, or another meaning, use semantic HTML as well as CSS.

The text-decoration Shorthand

text-decoration is a shorthand for line, style, color, and thickness. The components can appear in flexible order where the grammar permits, but a clear and consistent ordering helps teams read declarations quickly.

a {
  text-decoration: underline solid currentColor 0.08em;
}

The shorthand is convenient when defining a complete decoration. Use longhands when individual states change only one aspect or when the design token system manages color and thickness separately.

text-decoration-line

text-decoration-line determines which line or lines appear. The familiar values are none, underline, overline, and line-through. Multiple line values can be combined, although that is uncommon in ordinary interface design.

.review-mark {
  text-decoration-line: underline overline;
}

Choose the line according to a clear visual or semantic role. Decorative novelty should not obscure reading or resemble a link where no interaction exists.

Underline

Underlines are strongly associated with links on the web. This learned convention makes them valuable for discoverability, especially inside body text where a link sits among ordinary words. An underline also supplies a non-color cue, which helps users who cannot distinguish the chosen text colors.

.article a {
  color: #075985;
  text-decoration-line: underline;
}

Navigation menus and button-like controls may already communicate interaction through position, shape, or role, but inline links generally benefit from persistent underlines.

Overline

An overline draws above the text. It appears in specialized notation, editorial treatments, or language-specific typography more often than in routine application interfaces. Because users do not commonly interpret an overline as a standard interaction signal, it should not replace familiar link styling.

.special-notation {
  text-decoration-line: overline;
}

Verify that the line does not collide with accents or content on the preceding line, particularly when line height is tight.

Line-Through

A line-through crosses the text and is commonly used for an old price, completed item, or unavailable option. The visual line alone does not establish semantic meaning. A screen reader may announce only the text unless the HTML structure or accessible wording communicates the status.

.old-price {
  text-decoration-line: line-through;
}

Use <del> when content was deleted from a document and <s> when content is no longer accurate or relevant. Add explicit status text when users must understand the change to complete a task.

text-decoration: none

none removes decorations established on the element. It is often used in navigation where layout and context already identify links. Applying it globally to every anchor can make links inside paragraphs indistinguishable from ordinary text.

.primary-nav a {
  text-decoration: none;
}

Scope removal to components with another clear affordance. Do not depend on a subtle color difference or hover-only styling as the sole indication that text is interactive.

text-decoration-style

The style longhand controls the line pattern. Values include solid, double, dotted, dashed, and wavy. Solid is the strongest default for links because it is familiar and easy to recognize. Other styles should represent a deliberate state or editorial convention.

.warning-term {
  text-decoration-line: underline;
  text-decoration-style: wavy;
}

A wavy underline can resemble spelling or grammar feedback generated by an editor. Avoid using it decoratively where that association could confuse users.

text-decoration-color

The decoration color can differ from the text color. By default, decoration commonly uses currentColor, which follows the text color. A separate color can soften an underline or reinforce a state, but it still needs sufficient contrast against the background to remain visible.

.article-link {
  color: #0c4a6e;
  text-decoration-color: #0284c7;
}

Test normal, visited, hover, focus, and high-contrast conditions. A pale underline that disappears on one theme removes an important interaction cue.

text-decoration-thickness

This property controls the stroke thickness of decoration lines. Values can include auto, from-font, lengths, and percentages where supported. Relative thickness can scale with the text, while a fixed length remains fixed as font size changes.

.article-link {
  text-decoration-thickness: 0.08em;
}

Very thin lines may vanish on low-density displays or against complex backgrounds. Very thick lines can obscure glyphs. Review the chosen value at multiple sizes and weights.

text-underline-offset

text-underline-offset moves an underline away from or toward its reference position. A small positive offset often improves legibility by separating the line from descenders and giving the text more visual room.

.article-link {
  text-decoration: underline;
  text-underline-offset: 0.16em;
}

Offset is inherited, while decoration styling has different inheritance and propagation rules. Test nested text rather than assuming every property follows the same cascade behavior.

text-decoration-skip-ink

Underlines can cross descenders in letters such as g, j, p, q, and y. With text-decoration-skip-ink: auto, the browser may interrupt an underline around glyph ink to preserve character clarity. The appropriate behavior can vary by script, font, and underline position.

.article-link {
  text-decoration-skip-ink: auto;
}

Do not assume ink skipping produces the same visual result in every writing system. Test localized content, especially mixed-script text and fonts with unusual metrics.

text-underline-position

text-underline-position selects the reference position of underlines. Values such as auto, from-font, and under can help the browser place the line appropriately for the font and writing system. The property is separate from the decoration shorthand because positioning often needs to inherit independently.

.localized-link {
  text-decoration: underline;
  text-underline-position: under;
}

Use this control with language-aware testing. A position that looks polished for one script may be excessive or visually incorrect for another.

Decoration Propagation Is Not Ordinary Inheritance

Text decorations drawn by an ancestor can continue across descendant inline content. Setting text-decoration: none on a nested span does not necessarily erase the line originated by the ancestor. This behavior prevents an underline from breaking unexpectedly every time a link contains emphasized text or an inline element.

a { text-decoration: underline; }
a strong { text-decoration: none; }

The strong text can still appear underlined because the line belongs to the decorating ancestor. To create separately controlled regions, reconsider the markup and which element originates the decoration.

Multiple Decoration Lines

CSS can draw more than one decoration line from the same element. For example, underline and overline can be listed together. They share the configured style, color, and thickness from that decoration source.

.annotated {
  text-decoration-line: underline overline;
  text-decoration-style: solid;
}

Multiple lines can quickly make text feel crowded. Use them only where the notation is understood and verify spacing with accents, superscripts, and adjacent lines.

Text Decoration Versus Border

A bottom border belongs to an element's box, while an underline belongs to its text decoration. Borders can be useful for tabs, selected navigation regions, and box-level indicators. They do not naturally follow each wrapped line of a long inline link and may sit at a distance determined by padding and line box geometry.

.tab[aria-selected="true"] {
  border-block-end: 3px solid currentColor;
}

.article a {
  text-decoration: underline;
}

Use the text-specific feature for text underlines and the box feature for component boundaries. This keeps behavior predictable when content wraps.

Multi-Line Links

An inline link can wrap across multiple lines. A native text decoration follows the text fragments and preserves the relationship between the line and the linked words. A border generally follows the element box instead and may produce one long line or an awkward fragment depending on display behavior.

Test long link text at narrow widths, with increased text spacing, and in translated content. The underline should remain visible without colliding with neighboring lines.

Semantic HTML and Decoration

Visual styling does not create meaning on its own. A class that draws a line through text does not tell assistive technology whether the item was deleted, completed, unavailable, or replaced. Use semantic elements and explicit language appropriate to the content.

<p>
  <del>$99</del>
  <strong>$69</strong>
</p>

For task lists, communicate completion through checked controls or status text. For removed document content, use deletion markup when it accurately represents the edit.

Accessible Link Identification

Links within blocks of text should be visually identifiable without requiring hover. Color can contribute, but color alone may not serve people with limited color perception or displays with reduced contrast. A persistent underline is a familiar, durable cue.

.prose a {
  color: #075985;
  text-decoration: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.14em;
}

This treatment can be enhanced on interaction while remaining recognizable before the user moves a pointer or keyboard focus.

Hover, Focus, and Visited States

Interactive styling should cover more than hover. Keyboard users need a clear focus indicator, touch users may never receive hover, and visited-state feedback can help readers navigate long reference material. Decorations can change thickness or style while a separate outline provides a strong focus boundary.

.prose a:hover {
  text-decoration-thickness: 0.14em;
}

.prose a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

Do not remove the browser outline unless an equally visible replacement exists. The underline identifies the link; the focus outline identifies the currently focused control.

Do Not Depend on Decoration Alone

A line-through, colored underline, or wavy decoration can reinforce status, but it should not be the only communication channel. Users may apply custom styles, use forced-colors mode, listen with a screen reader, or view the page through a low-quality display where subtle line differences disappear.

Pair decoration with wording, semantic markup, icons that have accessible labels where needed, and programmatic states. Redundancy here improves comprehension rather than creating noise.

Real-World Article Pattern

Long-form content usually benefits from start alignment, a controlled line length, generous line height, and persistent underlined links. These choices support scanning and preserve link discoverability without making decoration dominant.

.article {
  max-inline-size: 68ch;
  text-align: start;
  line-height: 1.65;
}

.article a {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

The line measure and vertical rhythm matter as much as alignment. Typography should be evaluated as a system rather than as isolated properties.

Real-World Navigation Pattern

Navigation links are often recognizable through their location, repeated structure, and active-state treatment. Underlines may be removed in the resting state, but hover, focus, and current-page states still need clear feedback.

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

.site-nav a { text-decoration: none; }
.site-nav a:hover,
.site-nav a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

On small screens, confirm that wrapped labels remain readable and that focus treatment is not clipped by an overflow container.

Real-World Pricing Pattern

A price comparison often combines a line-through with weight, proximity, and explicit wording. The old price should remain readable enough to understand the comparison, while the current price receives stronger emphasis.

.old-price {
  color: #64748b;
  text-decoration: line-through;
}

.current-price {
  font-weight: 700;
}

Do not hide critical price information in generated CSS content. Keep actual values in the HTML so they remain available to assistive technology, copying, translation, and search.

Responsive Alignment Decisions

Alignment can change when content purpose changes across layouts, but avoid breakpoint rules that merely chase a screenshot. A desktop hero may use centered text, while a compact mobile card may use start alignment because its copy wraps into several lines. That is a content-based reason for changing the value.

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

@media (max-width: 36rem) {
  .feature-intro { text-align: start; }
}

Test widths between named breakpoints and include zoom. A component can become narrow due to a sidebar or container even on a wide viewport.

Multilingual and Vertical Writing

Text layout is not universally left-to-right and horizontal. Logical alignment values follow the inline axis, which makes them more resilient for right-to-left and vertical writing. Decoration position and ink skipping can also have script-specific expectations.

Set accurate language and direction metadata, use fonts that support required scripts, and test actual translations. Avoid assuming that a Latin-script underline recipe or justification method is suitable everywhere.

Print, PDF, and Export Behavior

Printed and exported documents may use different fonts, page widths, and line breaks. Justified text can develop different gaps, underlines can move with substituted font metrics, and decorations close to the baseline can become too heavy at print resolution.

Review generated PDF and Word output rather than relying only on screen preview. Preserve visible links in print where useful, include destination text when appropriate, avoid fixed-height text regions, and ensure line-through values still communicate the intended state in monochrome output.

Common Mistake: Centering Every Section

Centering headings, paragraphs, lists, labels, and actions may create superficial symmetry but weakens hierarchy and scanning. Lists become especially hard to read when bullets and wrapped lines lack a stable edge.

Center only compact content that benefits from symmetry. Keep detailed explanations, forms, checklists, and long messages aligned to their reading start.

Common Mistake: Using text-align for Layout

Text alignment is not a replacement for grid, flexbox, logical margins, or positioning. It can incidentally move inline-block children, which may appear to solve a layout problem until the child changes display type or the component gains another item.

Use layout systems for component placement and text-align for inline content. This separation makes responsive behavior more predictable.

Common Mistake: Overusing justify

Applying justification to all paragraphs without checking language and width creates unstable spacing. The issue is especially visible in cards, mobile screens, sidebars, and areas with long unbreakable terms.

Start with logical start alignment. Introduce justification only when the editorial requirement is strong and the content, hyphenation, measure, and target browsers have been tested together.

Common Mistake: Removing Every Link Underline

A global rule such as a { text-decoration: none; } removes one of the web's strongest interaction conventions. Links inside prose can then resemble plain text, particularly for users who cannot perceive the color difference.

Scope underline removal to navigation or button-like components with clear affordances. Restore underlines in article content, legal copy, help text, and other dense reading contexts.

Common Mistake: Fake Underlines

Background gradients and borders were once used to gain control unavailable in older text-decoration implementations. Modern CSS supports color, thickness, offset, style, and ink skipping directly. Fake techniques can fail on wrapped lines, high contrast, zoom, and mixed font sizes.

Use native decoration unless the design requires a genuinely box-level indicator. Native text behavior is usually simpler and more resilient.

Common Mistake: Visual Deletion Without Meaning

A line-through class changes appearance but does not explain why content is crossed out. In shopping, task management, document revision, and scheduling, that missing distinction can affect important decisions.

Choose semantic markup and visible labels that match the domain. Let CSS reinforce meaning already present in the document rather than carrying the full responsibility.

Common Mistake: Ignoring Inheritance and Propagation

Developers often expect all text properties to behave identically. Text alignment inherits through descendants, while decoration lines can propagate from the decorating element across descendant inline boxes. A reset on a child may therefore behave differently for the two features.

Inspect computed styles and decoration origins. When a nested element needs independent styling, reconsider where the original rule is applied instead of stacking overrides.

Testing Strategy

Test alignment with short and long copy, narrow and wide containers, left-to-right and right-to-left content, zoom, user text spacing, and changed font size. Include tables, dialogs, forms, navigation, empty states, error messages, and dynamically inserted content.

Test decorations across link states, multiline wrapping, descenders, punctuation, nested emphasis, multiple fonts, light and dark themes, forced colors, printing, and exports. Confirm that meaning survives when color or decoration is unavailable.

Debugging Alignment Problems

In DevTools, inspect the computed text-align, writing direction, writing mode, display type, width, and inherited source. If an element itself is not centered, determine whether it is a block that needs margins or a flex/grid item that needs container alignment.

Temporarily outline containers and inline elements to reveal the relevant boxes. Disable inherited rules one at a time and test with deliberately long text to expose assumptions hidden by a short sample.

Debugging Decoration Problems

Identify which element originates the decoration and inspect line, style, color, thickness, offset, and skip-ink values. A descendant may still appear underlined because an ancestor draws the line through its inline content. Font metrics and fallback fonts can also change position.

Compare the shorthand with its computed longhands, check interaction-state selectors, and test wrapping. Confirm that a border or pseudo-element is not being mistaken for a native text decoration.

Alignment and Decoration Comparison

Common Interview Questions

What does text-align do? It controls the inline alignment of content within line boxes in a block container.

What is the difference between start and left? Start follows writing direction, while left names a physical side.

Does text-align: center center the element? No. It centers inline content inside the element; the element itself needs an appropriate layout method.

Why can justified text be difficult to read? Narrow or uneven lines can develop large gaps and rivers of whitespace.

What does text-decoration control? It controls decorative lines and their style, color, thickness, and related underline behavior.

How can an underline be moved away from text? Use text-underline-offset.

Why might text-decoration: none on a child not remove an underline? The decoration may originate on an ancestor and propagate through descendant inline content.

Is line-through equivalent to deleted semantics? No. CSS is visual; semantic elements such as <del> communicate document meaning.

Why prefer text decoration to a border for links? Decoration follows wrapped text fragments and is designed for glyph-aware line treatment.

Should links appear only on hover? No. Links should remain identifiable for keyboard, touch, low-vision, and non-hover users.

Practical Review Checklist

• Use start alignment for most long-form and localized text.
• Reserve centered alignment for concise content.
• Use flexbox or grid to align components, not text-align.
• Test justified text at narrow widths and in each supported language.
• Keep inline links recognizable without requiring hover.
• Provide visible keyboard focus as well as hover feedback.
• Use native text decoration for multiline underlines.
• Choose semantic HTML when a decoration communicates meaning.
• Test underline offset, thickness, and ink skipping with actual fonts.
• Check inheritance and decoration propagation in nested elements.
• Verify light, dark, forced-color, print, PDF, and Word output.
• Test zoom, text spacing, translations, and dynamic content.

Key Takeaway

Text alignment determines how inline content occupies a line, while text decoration draws lines that identify links, revisions, prices, states, or specialized notation. Use logical start and end values when alignment should follow language direction, center only compact content, and treat justification as a language- and width-sensitive editorial choice.

For decoration, prefer native underline controls over imitation borders, retain clear link affordances, and combine visual treatment with semantic HTML whenever the line carries meaning. Test actual fonts, scripts, interaction states, responsive widths, and exports. Well-designed typography supports reading and interaction quietly: alignment establishes a dependable rhythm, while decoration communicates purpose without overwhelming the words.