Member Avatar for pro-tek

CSS to half of a character/word?

  • 8 Contributors
  • 7 Replies
  • 260 Views
  • 2 Weeks Discussion Span
  • Latest Post Latest Post by Portia_1

Dani AI

Generated

Short answer: yes — but not by targeting “half of a glyph” with a single CSS property on one DOM node. Practical solutions use one of three techniques: split the text into elements (manual or JS-wrapped), layer two identical copies and mask/clip one, or render text in SVG and mask it. Which to pick depends on whether the change is purely visual, whether the text must remain selectable/readable, and whether you can add markup or JavaScript.

As and noted, splitting into spans is the simplest for static text; as and pointed out, a small JS helper (Lettering.js or a custom wrapper) automates per-letter markup for dynamic content. ’s image approach works but sacrifices resolution, selectable text, and accessibility.

A robust visual-only approach is to duplicate the text and mask the top copy so only half shows in the alternate style. Example (keeps the original text readable by assistive tech):

<span class="split" aria-label="Hello">
  <span class="base">Hello</span>
  <span class="overlay" aria-hidden="true">Hello</span>
</span>
.split{position:relative;display:inline-block;color:#000}
.split .overlay{
  position:absolute;inset:0;
  color:#c00;pointer-events:none;user-select:none;
  -webkit-mask-image:linear-gradient(90deg,#000 0 50%,transparent 50% 100%);
  mask-image:linear-gradient(90deg,black 0 50%,transparent 50% 100%);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}

Notes and troubleshooting: mark the decorative copy aria-hidden="true" and disable selection so screen readers and copy/paste see only the real text. Test for anti-aliasing/kerning shifts — overlapping layers must use identical font settings to avoid blurry edges. If you need pixel-perfect clipping (no AA artifacts) or advanced shapes, use SVG text with a clipPath/mask. For widest compatibility, provide a simple span-split fallback or server-side wrapping when JS/CSS masking isn’t available.

Recommended Answers

All 7 Replies

Member Avatar for pritaeas

Please provide a more detailed example of what you want to achieve.

Member Avatar for AleMonteiro

I never saw it, and did no research, but at the topt of my head I'd say: No.

But you can always split the word with something like:

<p>Wo<b>rd</b></p>
Member Avatar for tobyITguy

use <span> tag with and id. Read about it.

Member Avatar for almostbob

not sure of the desired effect, but:
using css psuedo selectors styles can be applied automatically to certain parts of elements
breaking the word into <span class='1'>half</span><span class='2'>2ndhalf</span> can be applied manually,
or automatically with serverside wizardry beyond the scope of this question

Edited by almostbob
Member Avatar for Member #120589

If you don't want any markup in your static text, then js is the only way I can think of.

http://codepen.io/FWeinb/pen/djuIx - is so cool - or so horrible - I can't make up my mind. Heh heh.

Applying to a word is quite easy with js, but... you want to apply it to half a character?

I'm starting to think about kerning and duplicating the letter somehow. Or some sort of masking.

Member Avatar for Portia_1

make the character an image and then use image maps,

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.