OnlineCBT
Control text layout without altering its meaning
text-align controls inline content within a block. letter-spacing and word-spacing adjust spacing. text-transform changes presentation without rewriting the source text. Use these properties sparingly: readability matters more than a rigid visual pattern.
.article { text-align: start; }
.page-title { text-align: center; }
.eyebrow {
text-transform: uppercase;
letter-spacing: 0.08em;
font-size: 0.875rem;
}
.summary { line-height: 1.6; }start follows the writing direction, making it more adaptable than always forcing left alignment. text-align:center centres the text inside the block; it does not centre the block itself. A fixed-width block can be centred with an appropriate layout rule or auto inline margins.
Do not confuse transforms
text-transform:uppercase changes displayed letter case where the script supports it. It is unrelated to transform:translate or rotate, which changes a box's visual geometry. Keep underlying content correctly spelled and capitalized rather than relying on CSS to repair editorial mistakes.
Spacing and scripts
Large letter spacing can damage readability and does not suit every script. Avoid applying a Latin-style uppercase/letter-spacing treatment indiscriminately to Hindi text. Use ordinary prose spacing for paragraphs and test the actual language and font.
Justification
text-align:justify may create distracting gaps, especially in narrow columns. If a design requires it, test line length, hyphenation behavior and language settings. A left/start-aligned paragraph is often a clearer default for screen reading.
Exercises
- Centre a heading and separately centre its containing card; explain the two operations.
- Apply uppercase only to a short English category label, not the full article.
- Compare a narrow justified paragraph with start alignment.
- Set the document language correctly and test mixed Hindi/English text for broken spacing.
हिन्दी संकेत: text-align block के अंदर text को align करता है। हर script पर letter-spacing बढ़ाना सही नहीं होता।
