hyphens CSS Tester - Online Auto, Manual, None
Set hyphens: auto with lang attribute and see automatic hyphenation. Perfect for justified text. Browser built‑in.
UD5 Toolkit
Interactive preview of text-spacing — trim-start, space-first, ideograph-alpha & more for CJK typography.
text-spacing: normal;
The dashed red line marks the container's left edge — observe how leading punctuation aligns.
text-spacing property?
text-spacing is a CSS property defined in CSS Text Module Level 4 that controls spacing around punctuation and between ideographic (CJK) characters and other character types. It's especially useful for Chinese, Japanese, and Korean typography, where fullwidth punctuation marks often have built-in whitespace that may need trimming or adjusting for polished layouts.
Key values include trim-start (removes leading space from fullwidth punctuation at line start), space-first (preserves that space), ideograph-alpha (adds ¼em gap between CJK and Latin letters), and ideograph-numeric (same for digits).
trim-start and space-first?
trim-start: Removes the leading whitespace of fullwidth punctuation marks (like 「, (, 《) when they appear at the start of a block or line. This makes the text visually flush with the container's left edge.
space-first: Preserves that whitespace, keeping the punctuation's natural fullwidth spacing intact. The text will appear slightly indented if the first character is a fullwidth punctuation mark.
In traditional Chinese print typography, space-first is often the default, while trim-start is preferred in modern web layouts for cleaner alignment. The visual difference is subtle but meaningful for professional typesetting.
ideograph-alpha improve readability?
ideograph-alpha automatically inserts a ¼em space between CJK ideographs (hanzi, kanji, hangul) and adjacent Latin letters. Without this spacing, mixed-language text like "使用CSS进行排版" can look cramped, with Chinese characters and English letters touching each other.
With ideograph-alpha enabled, the same text displays as "使用 CSS 进行排版" (with subtle spacing), significantly improving legibility in multilingual content. This is especially valuable for technical documentation, UI labels, and internationalized websites.
text-spacing?
As of 2024–2025:
trim-start and space-first may not workFor production use, always provide a fallback and test across target browsers. The property is part of the Interop 2024 initiative, so cross-browser support is rapidly improving.
text-spacing values?
Yes! You can combine values by separating them with spaces. Common practical combinations include:
text-spacing: trim-start ideograph-alpha; — trim leading punctuation + add CJK-Latin spacingtext-spacing: trim-start ideograph-alpha ideograph-numeric; — all three enhancementstext-spacing: normal ideograph-alpha; — default behavior plus CJK-Latin spacingThe order of values doesn't matter; the browser applies all specified features. Use no-autospace to explicitly disable ideograph-alpha and ideograph-numeric if they're being inherited or defaulted.
text-spacing affect SEO?
Indirectly, yes. While text-spacing doesn't directly influence search engine rankings, it improves readability and user experience for CJK audiences — which are positive UX signals. Better readability leads to lower bounce rates and higher engagement, both of which can positively impact SEO.
For multilingual websites targeting Chinese, Japanese, or Korean users, proper text-spacing demonstrates attention to locale-specific typography, enhancing credibility and user trust.
trim-end and allow-end?
trim-end: Removes trailing whitespace from fullwidth punctuation at the end of a line or block — similar to trim-start but for the right/end side.
allow-end: Permits punctuation at line-end to hang outside the containing block (similar to hanging-punctuation). This is useful for justified text where a punctuation mark at line-end would otherwise push text to the next line.
Both affect line-end behavior, but allow-end is specifically about allowing punctuation to extend beyond the text block boundary for smoother line wrapping.
Set hyphens: auto with lang attribute and see automatic hyphenation. Perfect for justified text. Browser built‑in.
Design a layout where nested grids share track sizes with their parent via subgrid. Copy the complete CSS.
Create a pure CSS scroll progress indicator using animation‑timeline: scroll(). No JavaScript. Copy the complete code.
Paste your CSS and see warnings for properties that have limited browser support. Links to CanIUse. Modernize safely.
Limit browser gestures on an element: pan‑x, pinch‑zoom, manipulation. Draw on a canvas to test. Mobile dev helper.
Create complex linear gradients with any number of color stops, exact angles, and length units. Live preview and CSS code.
Style underlines, overlines, and strike-throughs with colors, wavy styles, and thickness. Modern CSS text‑decoration.
Design a button or card that glows on hover. Adjust shadow color, spread, and transition. Copy the CSS. Rich UI.
Type any character and see how it renders in different font stacks. Detect missing glyphs and fallback behavior.
Create a realistic letterpress (debossed) text effect using CSS text‑shadow and background. Adjust depth and light direction. Copy code.
Generate a subtle noise/grain texture as a CSS background pattern. Adjust opacity and size. For that film look.
Create a customizable checkerboard or grid background using pure CSS gradients. Adjust cell size and colors. Copy the code.
Upload two images and apply CSS blend modes (multiply, screen, overlay, etc.). See the result and copy the filter CSS. Pure frontend.
Add print styles like removing backgrounds, adding page breaks, setting margins. See print preview instantly.
Create a pure CSS countdown timer with a flipping number effect. Adjust duration and style. No JavaScript needed for display.
Create a glowing or rotating border animation around an element. Copy the CSS keyframes. Pure CSS magic.
Create a custom HTML/CSS progress bar with percentage, colors, and animation. Copy the code. Modern UI element.
Type a few words and see them rendered at every heading size (h1–h6) with your chosen font. Perfect for design systems.
Design a realistic neon sign text with multiple layers of glow. Copy the CSS and HTML. Perfect for headers.
A replica of the famous Flexbox Froggy game: solve alignment puzzles by writing CSS. Progress saved locally. Fun frontend learning.
Fetch a website's CSS and extract :root custom properties (‑‑color) to reveal its design token palette. For learning and inspiration.
Select a heading font and get recommended body font pairings. Live preview with sample text. Copy the CSS import links.
Paste a Kanji and watch it drawn stroke by stroke with numbered sequence. Excellent for learners. Static data set.
Recreate the target CSS linear gradient by adjusting stops and colors. A unique game for front‑end developers to master gradients.
Browse and search all Font Awesome 6 icons with preview, class name, and unicode. Copy the HTML snippet. Perfect for web developers.
Create text with a gradient fill using CSS background-clip. Configure colors and direction. Copy the code. Works in modern browsers.
A complete, searchable list of all 140+ named HTML/CSS colors with their hex codes and color previews. Click to copy code. Essential web reference.
Visually experiment with Flexbox container and item properties. See the layout update in real time and copy the CSS. Learn by doing, fully interactive.
Minify JavaScript and CSS code to reduce file size for production. Remove whitespace and comments instantly. Run locally, your code stays private.
Easily create asymmetric border radius values and preview the result. Copy the generated CSS instantly. All interactively and browser-based.