SVG alignment-baseline Property
alignment-baseline aligns a text span's baseline relative to its parent's dominant-baseline, useful for mixed-size text runs.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
How alignment-baseline Relates to dominant-baseline
While dominant-baseline sets the overall baseline reference for a text element, alignment-baseline works on a child <tspan> to align that specific span's baseline relative to its parent's established baseline, which becomes useful when mixing different font sizes within one line, such as a large number with a smaller unit label beside it.
- dominant-baseline sets the overall reference baseline for a text element
- alignment-baseline aligns a child tspan relative to that parent baseline
- Useful for mixing different font sizes within one line, like a number with a unit label
Practical Uses for Mixed-Size Text Alignment
A common use case pairs a large price number with a smaller currency symbol or decimal cents using alignment-baseline to control exactly how the smaller text segment aligns relative to the larger number's baseline, achieving the same careful typographic alignment seen in professional pricing displays and data visualizations.
- Common for pairing a large price number with a smaller currency or decimal segment
- Achieves careful typographic alignment seen in professional pricing displays
- Also useful in data visualizations mixing primary values with smaller unit labels
Frequently Asked Questions
Do I need both dominant-baseline and alignment-baseline for most text alignment needs?
For simple, single-size text, dominant-baseline alone is usually sufficient — alignment-baseline becomes specifically relevant when a tspan within that text needs a different vertical alignment than the rest of the line, such as mixed font sizes.
What values does alignment-baseline typically accept?
It accepts similar values to dominant-baseline, such as baseline, middle, hanging, and central, letting a specific tspan's alignment be set independently of its parent's overall dominant-baseline setting.
Related guides
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in under 3 seconds.
Try It Free — Convert Image to SVG