{"id":19286783,"url":"https://github.com/adobe-webplatform/css-shapes-polyfill","last_synced_at":"2025-04-03T03:13:50.548Z","repository":{"id":16149298,"uuid":"18894956","full_name":"adobe-webplatform/css-shapes-polyfill","owner":"adobe-webplatform","description":"Polyfill for the CSS Shapes Specification","archived":false,"fork":false,"pushed_at":"2015-04-07T13:31:46.000Z","size":2879,"stargazers_count":304,"open_issues_count":4,"forks_count":42,"subscribers_count":49,"default_branch":"master","last_synced_at":"2025-03-24T09:11:29.962Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/adobe-webplatform.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING","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-04-17T22:08:56.000Z","updated_at":"2025-01-06T12:01:36.000Z","dependencies_parsed_at":"2022-09-01T20:24:56.056Z","dependency_job_id":null,"html_url":"https://github.com/adobe-webplatform/css-shapes-polyfill","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/adobe-webplatform%2Fcss-shapes-polyfill","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adobe-webplatform%2Fcss-shapes-polyfill/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adobe-webplatform%2Fcss-shapes-polyfill/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adobe-webplatform%2Fcss-shapes-polyfill/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/adobe-webplatform","download_url":"https://codeload.github.com/adobe-webplatform/css-shapes-polyfill/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246927839,"owners_count":20856198,"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-11-09T22:04:20.504Z","updated_at":"2025-04-03T03:13:50.495Z","avatar_url":"https://github.com/adobe-webplatform.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"shapes-polyfill\n===============\n\nThe shapes polyfill is a JavaScript implementation of the [CSS Shapes][css-shapes-spec] specification.\nYou can use the polyfill to approximate CSS Shapes behavior in browsers that do not\nsupport the feature. By default, the polyfill will not run when a native shapes\nimplementation is available.\n\n## Using the polyfill\n\nTo use the polyfill, download or build `shapes-polyfill.js` or `shapes-polyfill.min.js` (the minified version). Then, include it in your page:\n\n    \u003cscript src='/shapes-polyfill.js'\u003e\u003c/script\u003e\n\nAfter that, set any shape styles in `\u003clink\u003e` or `\u003cstyle\u003e` stylesheets accessible to your domain:\n\n    .shape {\n        float: left;\n        shape-outside: circle(50%);\n        shape-margin: 1em;\n    }\n\nAnd add the required markup:\n\n    \u003cdiv class='shape'\u003e\u003c/div\u003e\n    This is some content that will wrap around the floating\n    shape to the left. How very exciting!\n\nThat's it!\n\n## Customization\n\nBy default, the script runs automatically. You can disable this behavior by setting `data-auto-run` to `false` on the script tag.\n\n    \u003cscript src='/shapes-polyfill.js' data-auto-run='false'\u003e\u003c/script\u003e\n\nThe polyfill can also be run on-demand using the `run` method:\n\n    \u003cscript\u003e\n        window.onload = function() {\n            window.ShapesPolyfill.run();\n        }\n    \u003c/script\u003e\n\nIf you are going to re-run the polyfill, you should first call `teardown`:\n\n    \u003cscript\u003e\n        window.setInterval(function() {\n            window.ShapesPolyfill.teardown();\n            window.ShapesPolyfill.run();\n        }, 5000);\n    \u003c/script\u003e\n\nOptional parameters can be passed in a params object to the run method, including `force` which can be set to one of the `ShapePolyfill.Force` values to force style reload, layout, or both. You might want to use this approach if you are dynamically modifying styles, or want to control exactly when the polyfill runs. For an example, check out `tests\\shapes-performance.html`.\n\n## Building the Polyfill\n\nIf you are interested in tinkering with the polyfill, you will need the following build dependencies:\n\n* [node][node],\n* [npm][npm], and\n* [grunt][grunt]\n\nTo build\n\n1. Clone the source code\n2. From the command line, enter the source directory\n3. Run `npm install`\n4. Run `grunt build`\n\nIf you are successful, you should have an updated `shapes-polyfill.js` and `shapes-polyfill.min.js` in your source directory. For a full list of tasks, just enter `grunt` at the command line.\n\nThe main source files are in the `src` directory, and you should make sure that any modifications you make pass the test suite in `tests\\shape-test-suite.html`. Note that some of the tests require being run from a local server.\n\n## Known Issues\n\nThe polyfill isn't perfect, and will generally work best with simple shapes. If you find a bug, please log an [issue][new-issue] to let us know.\n* Because of the way styles are loaded, inline styles, and those added after the script is loaded, will not be added automatically.\n* The implementation works by creating a series of floats approximating the shape's contour and parenting them within a zero-height div. As such, it may introduce line breaks if the original float shape occurs in the middle of a line of text.\n* Multiple shaped floats stacking or in close proximity may clear each other once the polyfill is applied.\n* The polyfill is slower than native implementations doing shapes layout (roughly 10-20x). You should take this into consideration when deciding if the polyfill is right for your project.\n* IE does not support SVG image values, as its security model prevents grabbing [rendered SVG pixel values via canvas][svg-canvas-origin-clean].\n* Some browsers will not issue a CORS request if a non-CORS version of the resource has already been loaded. This may surface if you use the same image as an `img`' `src` and `shape-outside`.\n\n## Browser Support\n\nThe polyfill should work with all current versions of desktop and mobile browsers. Below is a table of support for Chrome (C), Firefox (FF), Internet Explorer (IE), Opera (O), Safari (S), Android (A), and iOS (iOS) browsers.\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003cth\u003eC\u003c/th\u003e\n    \u003cth\u003eFF\u003c/th\u003e\n    \u003cth\u003eIE\u003c/th\u003e\n    \u003cth\u003eO\u003c/th\u003e\n    \u003cth\u003eS\u003c/th\u003e\n\n    \u003cth\u003eA\u003c/th\u003e\n    \u003cth\u003eiOS\u003c/th\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e5+\u003c/td\u003e\n    \u003ctd\u003e4+\u003c/td\u003e\n    \u003ctd\u003e10+ [1]\u003c/td\u003e\n    \u003ctd\u003e12+\u003c/td\u003e\n    \u003ctd\u003e5+\u003c/td\u003e\n\n    \u003ctd\u003e2.1\u003c/td\u003e\n    \u003ctd\u003e3.2+\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n[1] If you are not using cross-origin images, the polyfill should work back to IE 9. Also note the lack of SVG support, as of IE 11.\n\n## Feedback\n\nPlease let us know if you have any feedback. If you run into any problems, you can file a [new issue][new-issue]. You can also reach us [@adobeweb][twitter].\n\n[css-shapes-spec]: http://www.w3.org/TR/css-shapes/\n[new-issue]: https://github.com/adobe-webplatform/css-shapes-polyfill/issues/new\n[node]: http://nodejs.org\n[npm]: http://www.npmjs.org\n[grunt]: http://gruntjs.com\n[twitter]: http://twitter.com/adobeweb\n[svg-canvas-origin-clean]: http://svgopen.org/2010/papers/62-From_SVG_to_Canvas_and_Back/\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadobe-webplatform%2Fcss-shapes-polyfill","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fadobe-webplatform%2Fcss-shapes-polyfill","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadobe-webplatform%2Fcss-shapes-polyfill/lists"}