#HalfStyle

---

##style each half of a character, independently and individually.

---

An easy to use plugin.

HalfStyle is a set of advanced CSS rules that allow styling each half of a character, 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.

---

#[**See a Demo**][1]

---

###For a single character:

Pure CSS. All you need to do is add the class .halfStyle class 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:before class will be dynamic and you won't need to hard code it for every instance.

###For Any text:

Simply add .textToHalfStyle class to the element containing the text. The included jQuery snippet will do the rest of the job.

---

##License - HalfStyle is licensed under the MIT License located at: - https://github.com/arbelh/HalfStyle/blob/master/license.md

---

##Changelog

• v1.1.0
• 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 .textToHalfStyle elements)
• v1.0.1
• 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

---

##Author

• Email: arbel.hakopian@gmail.com
• GitHub: https://github.com/arbelh
• Los Angeles, CA

---

[1]: http://jsfiddle.net/pd9yB/108/