Style Half of a Character by CSS
Switch branches/tags
Nothing to show
Clone or download
arbelh Sets the default HalfStyle style-set to 'hs-base' if no 'data-halfsty…
…le' attribute is present on '.textToHalfStyle' instances.
Latest commit de531bf May 25, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
css Credits Update May 14, 2014
js Sets the default HalfStyle style-set to 'hs-base' if no 'data-halfsty… May 25, 2018
.gitattributes HalfStyle May 10, 2014
.gitignore HalfStyle May 10, 2014
README.md Sets the default HalfStyle style-set to 'hs-base' if no 'data-halfsty… May 25, 2018
credits.txt Credits Update May 15, 2014
demo.html Credits Update May 14, 2014
license.md HalfStyle May 10, 2014

README.md

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 or Another Demo


Download Zip


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


Changelog

  • v2.0.2

  • Sets the default HalfStyle style-set to 'hs-base' if no 'data-halfstyle' attribute is present on '.textToHalfStyle' instances.

  • v2.0.1

  • 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.

  • 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