Blog
Mert Özen's blog posts on software development, backend, frontend, and DevOps.
Everyday Utility Families 2: Typography, Color, Border, Shadow, Effect, Transform and Form Utilities, the typography and forms Plugins
In Tailwind v4, border and ring default to currentColor, ring is 1px, scale/rotate/translate write to the individual transform properties, and once @tailwindcss/forms is added accent-* no longer paints the checkbox. We measure the hover shadow and cover scale on Bookstore's book card, grayscale for out-of-stock books, native controls versus the forms plugin on the checkout form, and the prose class on a CMS body in Playwright.
Line Breaking and Overflow: white-space, overflow-wrap, word-break, hyphens, text-wrap: balance/pretty and Multi-Line Truncation
Use overflow-wrap: anywhere for long URLs and ISBNs, white-space: pre-line for user text, text-wrap: balance for headings, and the -webkit-line-clamp recipe for multi-line truncation; do not rely on hyphens: auto for Turkish text. On Bookstore's book detail page we measure the min-content difference between break-word and anywhere, Turkish hyphenation failing in both engines, balance and pretty results, and WebKit not painting ::first-letter in a clamped box.
Text Styling: the text-decoration Family, text-underline-offset, text-shadow, letter-spacing, text-indent and vertical-align
A readable link underline is written with longhands (text-decoration-thickness, text-underline-offset in em), letter-spacing is given in em or percent, and an inline icon is aligned to the digits with vertical-align. On Bookstore's catalog we measure, in Chromium and WebKit, how the text-decoration shorthand resets the thickness, how em is inherited as px, text-transform with lang="tr", the gap under an img and initial-letter support.
Fonts and @font-face: the font Shorthand, font-family Stacks, Variable Fonts and font-variation-settings
You define a self-hosted variable font with @font-face using a weight range (font-weight: 100 900), a separate italic face and unicode-range; you set the weight with font-weight and keep font-variation-settings for custom axes. With Fraunces on Bookstore's headings we measure, in Chromium and WebKit, how the font shorthand resets line-height, how a single-value descriptor breaks 700, faux italic, and which file the letters ğ, ş and İ come from.
Typography: Type Scale, Line Height, Line Length, Font Choice and Turkish Characters
Good typography rests on a few rules: a single-ratio type scale, 45–75 characters per line, 1.5–1.6 line-height for body text and tabular figures in tables. On Bookstore's book page we measure and fix 146-character lines and drifting decimal points, and show in Chromium the ch unit's trap in Inter, the ğ, ş, İ and ₺ missing from the latin subset, and the i that uppercases wrongly without lang.