/HalfStyle

Style Half of a Character by CSS

Primary LanguageCSSMIT LicenseMIT

#HalfStyle

##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**][1] or [**Another Demo**][3]
#[**Download Zip**][2]
###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:

Simply add .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.

The included demo.html file holds several examples for you.

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

##Changelog

  • v2.0.0
  • 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 .textToHalfStyle elements. You can define multiple Half-Style style-sets and tell the plugin which one to use.
  • Prefixed javascript variable names to avoid conflicts with other scripts.
  • Added multiple demos in demo.html
  • v1.2.0
  • Moving DOM write to outside of loop (better performance)
  • 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

[1]: http://jsfiddle.net/pd9yB/741/ [2]: https://github.com/arbelh/HalfStyle/archive/master.zip [3]: http://jsfiddle.net/pd9yB/740/