arbelh/halfstyle

Style Half of a Character by CSS

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

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

---

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

• Email: [email protected]
• GitHub: https://github.com/arbelh
• Los Angeles, CA

---

halfstyle's Issues

Demos do not work on newest Google Chrome

Newest google chrome only work on single characters

remove jQuery dependency

Add to NPM

It'd be a good idea to add the library to NPM and remove jQuery as #6 proposes

Although I'm not sure if this repository is still alive @arbelh
If not I could add it to NPM myself and proceed with jQuery removal

bower

Can you add HalfStyle to bower?

Why data-content?

Why not just use $(this).text() instead of assigning a data-content with the same content?