Style each half or third of a character, vertically or horizontally, independently and individually.
An easy to use plugin.
HalfStyle is a set of advanced CSS rules that allow styling each half or third of a character, vertically or horizontally, independently and individually.
Works on any dynamic text, or a single character, and is all automated. All you need to do is add a class on the target text and the rest is taken care of.
It also preservs the original text's accessibility for screen readers for the blind or visually impaired.
See a Demo or Another Demo
For a single character:
Pure CSS. All you need to do is add the classes
.halfStyle [-CustomClassName-] to the element containing the character you want to be half-styled.
For each element containing the character, a data attribute holds the character, for example
data-content="X", and the pseudo element uses
content:attr(data-content); so the
.halfStyle.[-CustomClassName-]:before class will be dynamic and you won't need to hard code it for every instance.
For Any text:
.textToHalfStyle class and data attribute
data-halfstyle="[-CustomClassName-]" to the element containing the text.
The included jQuery snippet will do the rest of the job.
You can also define multiple Half-Style style-sets and tell the plugin which one to use on your desired element.
demo.html file holds several examples for you.
- HalfStyle is licensed under the MIT License located at:
Sets the default HalfStyle style-set to 'hs-base' if no 'data-halfstyle' attribute is present on '.textToHalfStyle' instances.
Fixes a Chrome 59 and above issue - Addresses a Chrome bug where Chrome fails to correctly render and repaint pseudo elements - I came up with this fix after many different tests.
Customized Half-Styles dynamic support is the major update. The plugin can use a customized Half-Style style-set via
data-halfstyle="[-CustomClassName-]"on the target
.textToHalfStyleelements. You can define multiple Half-Style style-sets and tell the plugin which one to use.
Added multiple demos in
Moving DOM write to outside of loop (better performance)
Replaced DOM ready function with the short version with failsafe $ alias
Initializing vars only once in each scope
Removed unnecessary searches in the DOM ( multiple $('') statements for the same item )
Shortened some code
Now supports more than one element with HalfStyle full text replacement (multiple
Added support for accessibility, like audio screen readers or brail readers for the blind or visually impaired.
Now the base char is selectable by mouse.
v1.0.0 - First Version
- Email: firstname.lastname@example.org
- GitHub: https://github.com/arbelh
- Los Angeles, CA