It is possible to apply css to half of a character?
- Pure CSS for a Single Character
- Preserves Text Accessibility for screen readers for the blind or visually impaired
Part 1: Basic Solution
Webkit (and Chrome) only, though:
- Visually, all the examples that use two characters (be it via JS, CSS pseudo elements, or just HTML) look fine, but note that that all adds content to the DOM which may cause accessibility--as well as text selection/cut/paste issues.
To wrap the dynamically generated string, we could use a function like this:
- It may be irrelevant, maybe not, but sometime ago, We created a jQuery function that does the same thing, but horizontally.
- We called it "Strippex" For 'stripe'+'text', demo
- I'm not saying this is the solution of any problems, but We already tried to apply css to half of a character, but horizontally, So the idea is the same, the realisation may be horrible, but it works.
Here an ugly implementation in canvas. We tried this solution, but the results are worse than We expected, so here it is anyway.