Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/arbelh/HalfStyle
Style Half of a Character by CSS
https://github.com/arbelh/HalfStyle
Last synced: about 1 month ago
JSON representation
Style Half of a Character by CSS
- Host: GitHub
- URL: https://github.com/arbelh/HalfStyle
- Owner: arbelh
- License: mit
- Created: 2014-05-10T15:28:32.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2020-10-07T12:15:51.000Z (about 4 years ago)
- Last Synced: 2024-08-02T16:42:35.743Z (4 months ago)
- Language: CSS
- Size: 49.8 KB
- Stars: 780
- Watchers: 20
- Forks: 48
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: license.md
Awesome Lists containing this project
- my-awesome-github-stars - arbelh/HalfStyle - Style Half of a Character by CSS (CSS)
README
# 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.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
[1]: http://jsfiddle.net/arbel/pd9yB/1693/
[2]: https://github.com/arbelh/HalfStyle/archive/master.zip
[3]: http://jsfiddle.net/arbel/pd9yB/1692/