{"id":13591701,"url":"https://github.com/arbelh/HalfStyle","last_synced_at":"2025-04-08T17:32:20.515Z","repository":{"id":16884080,"uuid":"19644669","full_name":"arbelh/HalfStyle","owner":"arbelh","description":"Style Half of a Character by CSS","archived":false,"fork":false,"pushed_at":"2020-10-07T12:15:51.000Z","size":51,"stargazers_count":780,"open_issues_count":6,"forks_count":48,"subscribers_count":20,"default_branch":"master","last_synced_at":"2024-11-06T12:45:03.958Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/arbelh.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"license.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-05-10T15:28:32.000Z","updated_at":"2024-08-02T10:23:51.000Z","dependencies_parsed_at":"2022-08-25T14:31:25.641Z","dependency_job_id":null,"html_url":"https://github.com/arbelh/HalfStyle","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arbelh%2FHalfStyle","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arbelh%2FHalfStyle/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arbelh%2FHalfStyle/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arbelh%2FHalfStyle/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/arbelh","download_url":"https://codeload.github.com/arbelh/HalfStyle/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247892667,"owners_count":21013756,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-01T16:01:00.850Z","updated_at":"2025-04-08T17:32:15.507Z","avatar_url":"https://github.com/arbelh.png","language":"CSS","funding_links":[],"categories":["CSS"],"sub_categories":[],"readme":"# HalfStyle\n\u003chr/\u003e\n\n## Style each half or third of a character, vertically or horizontally, independently and individually.\n\n\u003chr/\u003e\n\nAn easy to use plugin.\n\nHalfStyle is a set of advanced CSS rules that allow styling each half or third of a character, vertically or horizontally, independently and individually.\n\nWorks 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.\n\nIt also preservs the original text's accessibility for screen readers for the blind or visually impaired.\n\n\u003chr/\u003e\n\n# [**See a Demo**][1] or [**Another Demo**][3]\n\n\u003chr/\u003e\n\n# [**Download Zip**][2]\n\n\u003chr/\u003e\n\n### For a single character:\n\nPure CSS. All you need to do is add the classes `.halfStyle [-CustomClassName-]` to the element containing the character you want to be half-styled.\n\nFor 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.\n\n### For Any text:\n\nSimply add `.textToHalfStyle` class and data attribute `data-halfstyle=\"[-CustomClassName-]\"` to the element containing the text.\nThe included jQuery snippet will do the rest of the job.\n\nYou can also define multiple Half-Style style-sets and tell the plugin which one to use on your desired element.\n\nThe included `demo.html` file holds several examples for you.\n\u003chr/\u003e\n\n## License\n- HalfStyle is licensed under the MIT License located at:\n- https://github.com/arbelh/HalfStyle/blob/master/license.md\n\u003chr/\u003e\n\n## Changelog\n- v2.0.2\n - Sets the default HalfStyle style-set to 'hs-base' if no 'data-halfstyle' attribute is present on '.textToHalfStyle' instances.\n- v2.0.1\n - 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.\n\n- v2.0.0\n - 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.\n - Prefixed javascript variable names to avoid conflicts with other scripts.\n - Added multiple demos in `demo.html`\n- v1.2.0\n - Moving DOM write to outside of loop (better performance)\n- v1.1.0\n - Replaced DOM ready function with the short version with failsafe $ alias\n - Initializing vars only once in each scope\n - Removed unnecessary searches in the DOM ( multiple $('') statements for the same item )\n - Shortened some code\n - Now supports more than one element with HalfStyle full text replacement (multiple `.textToHalfStyle` elements)\n- v1.0.1\n - Added support for accessibility, like audio screen readers or brail readers for the blind or visually impaired.\n - Now the base char is selectable by mouse.\n- v1.0.0 - First Version\n\u003chr/\u003e\n\n## Author\n- Email: arbel.hakopian@gmail.com\n- GitHub: https://github.com/arbelh\n- Los Angeles, CA\n\u003chr/\u003e\n\n[1]: http://jsfiddle.net/arbel/pd9yB/1693/\n[2]: https://github.com/arbelh/HalfStyle/archive/master.zip\n[3]: http://jsfiddle.net/arbel/pd9yB/1692/","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farbelh%2FHalfStyle","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Farbelh%2FHalfStyle","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farbelh%2FHalfStyle/lists"}