[ { "path": ".github/CONTRIBUTING.md", "content": "# Contributing to VS Code Custom Data\n\n## I want to update a specific HTML/CSS entity\n\nIf you go to `web-data`, the `generate-data` script will regenerate `data/browsers.html-data.json` and `data/browsers.css-data.json`.\n\nSome data are pulled remotely from MDN and other sources. For all the local xml and json files, you can edit them and run `yarn generate-data` to update the files in [`web-data/data`](../web-data/data)." }, { "path": ".gitignore", "content": "# Logs\nlogs\n*.log\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n\n# Runtime data\npids\n*.pid\n*.seed\n*.pid.lock\n\n# Directory for instrumented libs generated by jscoverage/JSCover\nlib-cov\n\n# Coverage directory used by tools like istanbul\ncoverage\n\n# nyc test coverage\n.nyc_output\n\n# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)\n.grunt\n\n# Bower dependency directory (https://bower.io/)\nbower_components\n\n# node-waf configuration\n.lock-wscript\n\n# Compiled binary addons (https://nodejs.org/api/addons.html)\nbuild/Release\n\n# Dependency directories\nnode_modules/\njspm_packages/\n\n# TypeScript v1 declaration files\ntypings/\n\n# Optional npm cache directory\n.npm\n\n# Optional eslint cache\n.eslintcache\n\n# Optional REPL history\n.node_repl_history\n\n# Output of 'npm pack'\n*.tgz\n\n# Yarn Integrity file\n.yarn-integrity\n\n# dotenv environment variables file\n.env\n\n# next.js build output\n.next\n" }, { "path": ".vscode/launch.json", "content": "{\n // Use IntelliSense to learn about possible attributes.\n // Hover to view descriptions of existing attributes.\n // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387\n \"version\": \"0.2.0\",\n \"configurations\": [\n {\n \"type\": \"pwa-node\",\n \"request\": \"launch\",\n \"name\": \"Launch Program\",\n \"skipFiles\": [\n \"/**\"\n ],\n \"program\": \"${workspaceFolder}/web-data/css/generateData.mjs\"\n }\n ]\n}" }, { "path": ".vscode/settings.json", "content": "{\n \"git.branchProtection\": [\n \"main\"\n ],\n \"git.branchProtectionPrompt\": \"alwaysCommitToNewBranch\",\n \"git.branchRandomName.enable\": true,\n \"githubPullRequests.assignCreated\": \"${user}\",\n \"githubPullRequests.defaultMergeMethod\": \"squash\"\n}" }, { "path": "CODE_OF_CONDUCT.md", "content": "# Microsoft Open Source Code of Conduct\r\n\r\nThis project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/).\r\n\r\nResources:\r\n\r\n- [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/)\r\n- [Microsoft Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/)\r\n- Contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with questions or concerns\r\n" }, { "path": "LICENSE", "content": " MIT License\r\n\r\n Copyright (c) Microsoft Corporation.\r\n\r\n Permission is hereby granted, free of charge, to any person obtaining a copy\r\n of this software and associated documentation files (the \"Software\"), to deal\r\n in the Software without restriction, including without limitation the rights\r\n to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\r\n copies of the Software, and to permit persons to whom the Software is\r\n furnished to do so, subject to the following conditions:\r\n\r\n The above copyright notice and this permission notice shall be included in all\r\n copies or substantial portions of the Software.\r\n\r\n THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\r\n IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\r\n FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\r\n AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\r\n LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\r\n OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\r\n SOFTWARE\r\n" }, { "path": "README.md", "content": "

\r\n

VS Code Custom Data

\r\n Documentation, sample and data for using VS Code's HTML/CSS custom data format.\r\n

\r\n\r\n## Synopsis\r\n\r\nVS Code ships with rich [language feature support](https://code.visualstudio.com/api/language-extensions/programmatic-language-features) for HTML/CSS, such as auto-completion and hover information. The core of these language support are implemented in [vscode-html-languageservice](https://github.com/microsoft/vscode-html-languageservice) and [vscode-css-languageservice](https://github.com/microsoft/vscode-css-languageservice). In the past, these libraries were coupled to outdated schemas that define HTML/CSS entities. Custom data decouples these libraries from the data they use and allows VS Code to offer up-to-date support for latest HTML/CSS proposals or frameworks built on top of HTML/CSS.\r\n\r\n## Usage\r\n\r\nThere are two primary use cases:\r\n\r\n1. You can use settings, `html.customData` and `css.customData` in your settings to let VS Code load additional HTML/CSS entities, so they would show up in auto-completion, hover information etc. See [helloworld sample](./samples/helloworld) for an example.\r\n2. You can use [Contribution Points](https://code.visualstudio.com/api/references/contribution-points), `contributes.html.customData` or `contributes.css.customData` to load Custom Data into VS Code. See [vscode-mavo](https://github.com/octref/vscode-mavo) for an example.\r\n\r\n## Explanation\r\n\r\nTake this HTML auto-completion example:\r\n\r\n`<|`\r\n\r\n- `vscode-html-languageservice` determines that it should provide a list of tag names, such as `div`, `span`, `p`.\r\n- By default, VS Code provides data extracted from HTML spec to `vscode-html-languageservice`, so `<|` completes all HTML tags described in the HTML spec.\r\n- The `html.customData` setting and `contributes.html.customData` allows you to extend this list to include your own definition of HTML tags.\r\n\r\nOn the one hand, we continuously curate the data VS Code provides to the HTML/CSS language services. For example, VS Code pulls data from [mdn/data](https://github.com/mdn/data) and [mdn/browser-compat-data](https://github.com/mdn/browser-compat-data) to provide latest information on CSS properties' usage, syntax and browser compatibility. By continously following the latest web spec, VS Code can provide latest information & up-to-date language support for new HTML/CSS entities.\r\n\r\n
\r\n \"CSS\r\n
\r\n

\r\n\r\nOn the other hand, for users and framework authors who build new technologies and frameworks on top of HTML/CSS, custom data offers an easy way for them to add support for their custom frameworks. For example:\r\n- WebComponents-based frameworks can statically analyze their components and emit a JSON file following the custom data schema to get language support.\r\n- Vue language server can analyze Vue components and load custom data into its `vscode-html-languageservice` based Language Server to provide Vue-specific auto-completions.\r\n\r\n
\r\n \"WebComponents\r\n
\r\n\r\n## Documentation\r\n\r\n- [HTML Custom Data](https://github.com/microsoft/vscode-html-languageservice/blob/master/docs/customData.md)\r\n- [CSS Custom Data](https://github.com/microsoft/vscode-css-languageservice/blob/master/docs/customData.md)\r\n\r\n## Schemas and Versioning\r\n\r\n- [Latest HTML Schema, V1.1](https://github.com/microsoft/vscode-html-languageservice/blob/master/docs/customData.schema.json)\r\n- [Latest CSS Schema, V1.1](https://github.com/microsoft/vscode-CSS-languageservice/blob/master/docs/customData.schema.json)\r\n\r\n### Versioning\r\n\r\n- Schemas are versioned in the format of `.`.\r\n- `Minor` changes are backwards compatible. Custom data that satisfies `V1.X` spec would be valid according to `V1.0` spec.\r\n- `Major` changes introduce breaking changes. Custom data that satisfies `V2.X` spec would likely be invalid according to `V1.0` spec.\r\n\r\n## Samples\r\n\r\n- [`samples/helloworld`](./samples/helloworld): Open this sample in VS Code and start playing with custom data.\r\n- [`samples/svg`](./samples/svg): A real-world sample that loads SVG-related HTML/CSS entities in VS Code.\r\n- [`samples/webcomponents`](./samples/webcomponents): Use custom data to get web component editor support in HTML.\r\n- [`octref/vscode-mavo`](https://github.com/octref/vscode-mavo): Use custom data to support the [Mavo framework](https://mavo.io) built on top of HTML/CSS.\r\n\r\n## Web Data\r\n\r\n`/web-data` contains the data collection pipelines and the actual data being used in the VS Code [HTML extension](https://github.com/microsoft/vscode/tree/master/extensions/html-language-features) and [CSS extension](https://github.com/microsoft/vscode/tree/master/extensions/css-language-features). It pulls data from sources such as HTML/CSS spec and MDN and massages them into the custom data format ready to use.\r\n\r\n## Updating Web Data\r\n\r\n- Run `npm run update-sources`, which updates `@mdn/browser-compat-data`, `mdn-data` and `attributeRelevance.js`\r\n- After all updates are done, run `npm run generate-data`\r\n- Review the diff. Make sure the updates look reasonable. If there are new properties, make sure that they don't have blank descriptions. There is no API for pulling descriptions. Each time you regenerate the data, if there are properties with missing descriptions, find its MDN page, go to https://github.com/microsoft/vscode-custom-data/blob/master/web-data/css/mdn/mdn-documentation.js and update it manually\r\n- Finally, commit and publish the data to [@vscode/web-custom-data](https://www.npmjs.com/package/@vscode/web-custom-data) on NPM. \r\n\r\n## Contributing\r\n\r\nThis project welcomes contributions and suggestions. Most contributions require you to agree to a\r\nContributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us\r\nthe rights to use your contribution. For details, visit https://cla.opensource.microsoft.com.\r\n\r\nWhen you submit a pull request, a CLA bot will automatically determine whether you need to provide\r\na CLA and decorate the PR appropriately (e.g., status check, comment). Simply follow the instructions\r\nprovided by the bot. You will only need to do this once across all repos using our CLA.\r\n\r\nThis project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/).\r\nFor more information see the [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/) or\r\ncontact [opencode@microsoft.com](mailto:opencode@microsoft.com) with any additional questions or comments.\r\n" }, { "path": "SECURITY.md", "content": "\r\n\r\n## Security\r\n\r\nMicrosoft takes the security of our software products and services seriously, which includes all source code repositories managed through our GitHub organizations, which include [Microsoft](https://github.com/Microsoft), [Azure](https://github.com/Azure), [DotNet](https://github.com/dotnet), [AspNet](https://github.com/aspnet), [Xamarin](https://github.com/xamarin), and [many more](https://opensource.microsoft.com/).\r\n\r\nIf you believe you have found a security vulnerability in any Microsoft-owned repository that meets Microsoft's [definition](https://docs.microsoft.com/en-us/previous-versions/tn-archive/cc751383(v=technet.10)) of a security vulnerability, please report it to us as described below.\r\n\r\n## Reporting Security Issues\r\n\r\n**Please do not report security vulnerabilities through public GitHub issues.** Instead, please report them to the Microsoft Security Response Center at [secure@microsoft.com](mailto:secure@microsoft.com). If possible, encrypt your message with our PGP key; please download it from the [Microsoft Security Response Center PGP Key page](https://technet.microsoft.com/en-us/security/dn606155).\r\n\r\nYou should receive a response within 24 hours. If for some reason you do not, please follow up via email to ensure we received your original message. Additional information can be found at [microsoft.com/msrc](https://www.microsoft.com/msrc).\r\n\r\nPlease include the requested information listed below (as much as you can provide) to help us better understand the nature and scope of the possible issue:\r\n\r\n * Type of issue (e.g. buffer overflow, SQL injection, cross-site scripting, etc.)\r\n * Full paths of source file(s) related to the manifestation of the issue\r\n * The location of the affected source code (tag/branch/commit or direct URL)\r\n * Any special configuration required to reproduce the issue\r\n * Step-by-step instructions to reproduce the issue\r\n * Proof-of-concept or exploit code (if possible)\r\n * Impact of the issue, including how an attacker might exploit the issue\r\n\r\nThis information will help us triage your report more quickly.\r\n\r\n## Preferred Languages\r\n\r\nWe prefer all communications to be in English.\r\n\r\n## Policy\r\n\r\nMicrosoft follows the principle of [Coordinated Vulnerability Disclosure](https://www.microsoft.com/en-us/msrc/cvd).\r\n\r\n" }, { "path": "build/pipeline.yml", "content": "name: $(Date:yyyyMMdd)$(Rev:.r)\n\ntrigger:\n batch: true\n branches:\n include:\n - main\npr: none\n\nresources:\n repositories:\n - repository: templates\n type: github\n name: microsoft/vscode-engineering\n ref: main\n endpoint: Monaco\n\nparameters:\n - name: publishPackage\n displayName: 🚀 Publish web-custom-data\n type: boolean\n default: false\n\nextends:\n template: azure-pipelines/npm-package/pipeline.yml@templates\n parameters:\n npmPackages:\n - name: web-custom-data\n\n testPlatforms:\n - name: Linux\n nodeVersions:\n - 20.x\n\n publishPackage: ${{ parameters.publishPackage }}\n publishRequiresApproval: false\n workingDirectory: $(Build.SourcesDirectory)/web-data\n" }, { "path": "samples/helloworld/.vscode/settings.json", "content": "{\n \"html.customData\": [\"./html.html-data.json\"],\n \"css.customData\": [\"./css.css-data.json\"]\n}\n" }, { "path": "samples/helloworld/README.md", "content": "# Custom Data for HTML/CSS support in VS Code\n\nThis demonstrates Custom HTML/CSS data support for VS Code.\n\nSee https://code.visualstudio.com/updates/v1_31 for details.\n\n## Usage\n\n- Open this folder in VS Code 1.31+\n- Try completion/hover in the test.html and test.css\n - In `test.html`, try typing `` HTML tag.\n - In `test.css` try typing `my-` inside a selector to complete `my-size` CSS property.\n- Edit data in html.json and css.json and reload VS Code to reload the custom data\n\n## Docs\n\n- [HTML Custom Data](https://github.com/Microsoft/vscode-html-languageservice/blob/master/docs/customData.md)\n- [CSS Custom Data](https://github.com/Microsoft/vscode-css-languageservice/blob/master/docs/customData.md)" }, { "path": "samples/helloworld/css.css-data.json", "content": "{\n \"version\": 1.1,\n \"properties\": [{\n \"name\": \"my-size\",\n \"description\": \"Compiles down to `width` and `height`. See details at https://github.com/postcss/postcss-size\",\n \"references\": [\n {\n \"name\": \"GitHub\",\n \"url\": \"https://github.com/postcss/postcss-size\"\n }\n ]\n }],\n \"pseudoClasses\": [{\n \"name\": \":my-link\",\n \"description\": \":any-link pseudo class. See details at https://preset-env.cssdb.org/features#any-link-pseudo-class\"\n }]\n}" }, { "path": "samples/helloworld/html.html-data.json", "content": "{\n \"version\": 1.1,\n \"tags\": [\n {\n \"name\": \"my-button\",\n \"description\": \"My button. You should use it as in ``.\",\n \"attributes\": [\n {\n \"name\": \"type\",\n \"description\": \"My button type\",\n \"values\": [{ \"name\": \"alert\" }]\n }\n ],\n \"references\": [\n {\n \"name\": \"Bootstrap buttons\",\n \"url\": \"https://getbootstrap.com/docs/4.0/components/buttons/\"\n }\n ]\n }\n ]\n}\n" }, { "path": "samples/helloworld/test.css", "content": ":my-link {\n my-size: 4px;\n}" }, { "path": "samples/helloworld/test.html", "content": "" }, { "path": "samples/svg/.gitignore", "content": "dist\nnode_modules\n.vscode-test/\n*.vsix\n" }, { "path": "samples/svg/.vscode/launch.json", "content": "{\n\t\"version\": \"0.2.0\",\n\t\"configurations\": [{\n\t\t\t\"name\": \"Run Extension\",\n\t\t\t\"type\": \"extensionHost\",\n\t\t\t\"request\": \"launch\",\n\t\t\t\"runtimeExecutable\": \"${execPath}\",\n\t\t\t\"args\": [\n\t\t\t\t\"--extensionDevelopmentPath=${workspaceFolder}\"\n\t\t\t],\n\t\t\t\"outFiles\": [\n\t\t\t\t\"${workspaceFolder}/out/**/*.js\"\n\t\t\t]\n\t\t},\n\t\t{\n\t\t\t\"name\": \"Update Data\",\n\t\t\t\"program\": \"${workspaceFolder}/dist/index.js\",\n\t\t\t\"request\": \"launch\",\n\t\t\t\"skipFiles\": [\n\t\t\t\t\"/**\"\n\t\t\t],\n\t\t\t\"type\": \"pwa-node\",\n\t\t\t\"preLaunchTask\": \"npm: compile\"\n\t\t}\n\t]\n}\n" }, { "path": "samples/svg/.vscode/settings.json", "content": "{\n \"html.customData\": [\"./data/svg.html-data.json\"],\n \"css.customData\": [\"./data/svg.css-data.json\"],\n}\n" }, { "path": "samples/svg/.vscode/tasks.json", "content": "// See https://go.microsoft.com/fwlink/?LinkId=733558\n// for the documentation about the tasks.json format\n{\n\t\"version\": \"2.0.0\",\n\t\"tasks\": [\n\t\t{\n\t\t\t\"type\": \"npm\",\n\t\t\t\"script\": \"watch\",\n\t\t\t\"problemMatcher\": \"$tsc-watch\",\n\t\t\t\"isBackground\": true,\n\t\t\t\"presentation\": {\n\t\t\t\t\"reveal\": \"never\"\n\t\t\t},\n\t\t\t\"group\": {\n\t\t\t\t\"kind\": \"build\",\n\t\t\t\t\"isDefault\": true\n\t\t\t}\n\t\t}\n\t]\n}" }, { "path": "samples/svg/README.md", "content": "# SVG Sample\n\nSVG support in HTML/CSS files using plain JSON files.\n\n- HTML support: https://github.com/Microsoft/vscode/issues/62976\n- CSS support: https://github.com/Microsoft/vscode/issues/64164\n\nThe data are pulled from:\n\n- SVG 2 [spec](https://www.w3.org/TR/SVG2/) and [GitHub](https://github.com/w3c/svgwg)\n- [MDN SVG reference](https://developer.mozilla.org/en-US/docs/Web/SVG)\n- [mdn/browser-compat-data](https://github.com/mdn/browser-compat-data)\n\n## Usage\n\n- Open this folder in VS Code 1.31+\n- Try editing the test.html or test.css files. You should get SVG tags and attributes in HTML files, and SVG specific CSS properties in CSS files.\n- Look into the `contributes` section of `package.json`. You can package this project into an extension with [`vsce`](https://code.visualstudio.com/api/working-with-extensions/publishing-extension#vsce). Alternatively, you can download the pre-packaged versions from [releases](https://github.com/octref/svg-data/releases).\n\n## Docs\n\n- [HTML Custom Data](https://github.com/Microsoft/vscode-html-languageservice/blob/master/docs/customData.md)\n- [CSS Custom Data](https://github.com/Microsoft/vscode-css-languageservice/blob/master/docs/customData.md)\n\n## License\n\nMIT" }, { "path": "samples/svg/build/index.ts", "content": "import { getSVGSpec, HTMLElement, HTMLAttribute, CSSProperty } from './svg-spec'\nimport { getMDNMDDescription } from './mdn-description'\n\nimport { sleep } from './util'\nimport * as path from 'path'\nimport * as fs from 'fs'\nimport { addCSSMDNData } from './mdn-data'\n\n/**\n * Get static CSS data from\n * - Spec\n * - mdn-data and mdn-browser-compat-data\n */\nfunction getStaticHTMLData() {\n const { elements, globalAttributes } = getSVGSpec()\n\n return {\n elements,\n globalAttributes\n }\n}\n\n/**\n * Attach HTML descriptions from MDN to input properties\n */\nasync function attachAsyncHTMLDataFromMDN(\n elements: HTMLElement[],\n globalAttributes: HTMLAttribute[]\n): Promise {\n // Collect all attribute\n const allAttributes = globalAttributes\n elements.forEach(el => {\n el.attributes.forEach(a => {\n if (!allAttributes.find(ta => ta.name === a.name)) {\n allAttributes.push(a)\n }\n })\n })\n\n for (let e of elements) {\n let desc\n try {\n desc = await getMDNMDDescription(e.name, 'tag')\n } catch (err) {\n return false\n }\n\n if (desc) {\n e.description = desc\n await sleep(1000)\n console.log(`Done with ${e.name} tag`)\n }\n }\n\n for (let a of allAttributes) {\n let desc\n try {\n desc = await getMDNMDDescription(a.name, 'attribute')\n } catch (err) {\n return false\n }\n\n if (desc) {\n a.description = desc\n await sleep(1000)\n console.log(`Done with ${a.name} attribute`)\n }\n }\n\n return true\n}\n\nasync function generateHTMLData() {\n const { elements, globalAttributes } = getStaticHTMLData()\n const getMdnDataSuccess = attachAsyncHTMLDataFromMDN(elements, globalAttributes)\n\n if (!getMdnDataSuccess) {\n console.log('Failed to get data from MDN')\n return\n }\n\n const htmlOut = {\n version: 1.1,\n tags: elements,\n globalAttributes\n }\n\n console.log('Writing svg-html-contribution.json')\n fs.writeFileSync(path.resolve(__dirname, '../raw-data/svg-html-contribution.json'), JSON.stringify(htmlOut, null, 2))\n console.log('Done writing svg-html-contribution.json')\n}\n\n/**\n * Get static CSS data from\n * - Spec\n * - mdn-data and mdn-browser-compat-data\n */\nfunction getStaticCSSData(): CSSProperty[] {\n const { cssSpecProperties } = getSVGSpec()\n\n return cssSpecProperties.map(addCSSMDNData)\n}\n\n/**\n * Attach CSS descriptions from MDN to input properties\n */\nasync function attachAsyncCSSDataFromMDN(cssProperties: CSSProperty[]): Promise {\n for (let p of cssProperties) {\n let desc\n try {\n desc = await getMDNMDDescription(p.name, 'attribute')\n } catch (err) {\n return false\n }\n\n if (desc) {\n p.description = desc\n await sleep(1000)\n }\n console.log(`Done with ${p.name} property`)\n }\n\n return true\n}\n\nasync function generateCSSData() {\n const cssProperties = getStaticCSSData()\n const getMdnDataSuccess = await attachAsyncCSSDataFromMDN(cssProperties)\n\n if (!getMdnDataSuccess) {\n console.log('Failed to get data from MDN')\n return\n }\n\n const cssOut = {\n version: 1.1,\n properties: cssProperties\n }\n\n console.log('Writing svg-css-contribution.json')\n fs.writeFileSync(path.resolve(__dirname, '../raw-data/svg-css-contribution.json'), JSON.stringify(cssOut, null, 2))\n console.log('Done writing svg-css-contribution.json')\n}\n\nasync function getHTMLData() {\n const { elements, globalAttributes } = getSVGSpec()\n\n for (let e of elements) {\n const desc = await getMDNMDDescription(e.name, 'tag')\n if (desc) {\n e.description = desc\n await sleep(1000)\n console.log(`Done with ${e.name} tag`)\n }\n }\n\n const allAttributes = globalAttributes\n elements.forEach(el => {\n el.attributes.forEach(a => {\n if (!allAttributes.find(ta => ta.name === a.name)) {\n allAttributes.push(a)\n }\n })\n })\n\n for (let a of allAttributes) {\n const desc = await getMDNMDDescription(a.name, 'attribute')\n if (desc) {\n a.description = desc\n await sleep(1000)\n console.log(`Done with ${a.name} attribute`)\n }\n }\n\n const htmlOut = {\n tags: elements,\n globalAttributes\n }\n\n fs.writeFileSync(path.resolve(__dirname, '../raw-data/svg-html-contribution.json'), JSON.stringify(htmlOut, null, 2))\n}\n\n;(async () => {\n await generateHTMLData()\n await generateCSSData()\n})()\n" }, { "path": "samples/svg/build/mdn-bcd.ts", "content": "const bcd = require('@mdn/browser-compat-data')\n\nimport * as fs from 'fs'\nimport * as path from 'path'\nimport { CSSProperty } from './svg-spec';\n\nconst el = bcd.svg.elements as any\nconst at = bcd.svg.attributes as any\n\nfunction htmlExport() {\n const tags = []\n for (let e in el) {\n tags.push({\n label: e,\n description: `svg tag: ${e}`,\n attributes: []\n })\n }\n\n const serializedTags = JSON.stringify({ tags }, null, 2)\n\n fs.writeFileSync(path.resolve(__dirname, '../data/svg-tags.json'), serializedTags)\n\n const attributes = []\n for (let category in at) {\n for (let a in at[category]) {\n attributes.push({\n label: a,\n description: `svg attribute: ${a}`\n })\n }\n }\n \n const serializedAttributes = JSON.stringify({ attributes }, null, 2)\n\n fs.writeFileSync(path.resolve(__dirname, '../data/svg-attributes.json'), serializedAttributes)\n}\n\nfunction cssExport() {\n const properties = []\n for (let category in at) {\n for (let a in at[category]) {\n properties.push({\n name: a,\n desc: `svg attribute: ${a}`\n })\n }\n }\n \n const serializedProperties = JSON.stringify({ properties }, null, 2)\n fs.writeFileSync(path.resolve(__dirname, '../data/svg-properties.json'), serializedProperties)\n}\n\n// htmlExport()\n// cssExport()\n\n\n/**\n * In \n */\nfunction addMDNData(properties: Partial[]) {\n\n}" }, { "path": "samples/svg/build/mdn-data.ts", "content": "\nconst mdnData = require('mdn-data');\nconst bcdData = require('@mdn/browser-compat-data')\n\nimport { CSSProperty, CSSSpecProperty } from './svg-spec';\nimport { toCompatString, isSupportedInAllBrowsers } from './util';\n\nconst properties = mdnData.css.properties\nconst bcdProperties = bcdData.css.properties\n\nexport function addCSSMDNData(specProperty: CSSSpecProperty): CSSProperty {\n const property: CSSProperty = { ...specProperty }\n\n if (getPropertyStatus(specProperty.name)) {\n property.status = getPropertyStatus(specProperty.name)\n }\n if (getPropertySyntax(specProperty.name)) {\n property.syntax = getPropertySyntax(specProperty.name)\n }\n if (getPropertyBrowsers(specProperty.name)) {\n property.browsers = getPropertyBrowsers(specProperty.name)\n }\n\n return property\n}\n\nfunction getPropertyStatus(name: string) {\n if (properties[name]) {\n let status = properties[name].status;\n let mdnCompatEntry = bcdProperties[name];\n if (!mdnCompatEntry) {\n for (const contextName in mdnCompatEntry) {\n if (mdnCompatEntry[contextName].__compat) {\n mdnCompatEntry = mdnCompatEntry[contextName].__compat;\n break;\n }\n }\n }\n\n const compatStatus = mdnCompatEntry?.status;\n if (compatStatus) {\n if (compatStatus.experimental) {\n status = 'experimental';\n } else if (compatStatus.deprecated) {\n status = 'obsolete';\n } else if (compatStatus.standard_track) {\n status = 'standard';\n } else {\n status = 'nonstandard';\n }\n }\n return status;\n }\n}\n\nfunction getPropertySyntax(name: string) {\n if (properties[name]) {\n return properties[name].syntax\n }\n}\n\nfunction getPropertyBrowsers(name: string) {\n if (bcdProperties[name]) {\n if (!isSupportedInAllBrowsers(bcdProperties[name])) {\n return toCompatString(bcdProperties[name])\n }\n }\n}" }, { "path": "samples/svg/build/mdn-description.ts", "content": "\nexport type PropertyType = 'tag' | 'attribute'\n\nexport async function getMDNMDDescription(name: string, type: PropertyType) {\n // todo; get a desscription, e.g. from https://github.com/mdn/content/edit/main/files/en-us/web/svg/attribute/{name}/index.md\n return null;\n}\n" }, { "path": "samples/svg/build/postprocess.ts", "content": "import * as fs from 'fs'\nimport * as path from 'path'\n\nconst htmlData = require(path.resolve(__dirname, '../raw-data/svg-html-contribution.json'))\nconst cssData = require(path.resolve(__dirname, '../raw-data/svg-css-contribution.json'))\n\nfunction transform(entry : any) {\n const result = {\n kind: 'markdown',\n value: ''\n }\n\n if (entry.description) {\n result.value += entry.description\n }\n\n if (entry.syntax) {\n result.value += `\\n\\nSyntax: ${entry.syntax}`\n delete entry.syntax\n }\n \n if (entry.status) {\n result.value += `\\n\\nStatus: ${entry.status}`\n delete entry.status\n }\n \n if (entry.browsers) {\n result.value += `\\n\\nSupported browsers: ${entry.browsers.join(',')}`\n delete entry.browsers\n }\n console.log(result.value)\n \n entry.description = result\n}\n\ncssData.properties.forEach(transform)\n\n// fs.writeFileSync(path.resolve(__dirname, '../data/svg.html-data.json'), JSON.stringify(htmlData, null, 2));\nfs.writeFileSync(path.resolve(__dirname, '../data/svg.css-data.json'), JSON.stringify(cssData, null, 2));\nconsole.log('Done')" }, { "path": "samples/svg/build/svg-spec.ts", "content": "import * as path from 'path'\nimport * as fs from 'fs'\n\nconst DEFINITION_PATH = path.resolve(__dirname, '../raw-data/definitions.xml')\n\nimport * as cheerio from 'cheerio'\n\ninterface Reference {\n name: string\n url: string\n}\n\nexport interface HTMLElement {\n name: string\n description?: string\n attributes: HTMLAttribute[]\n attributeCategories: string[]\n references?: Reference[]\n}\n\nexport interface HTMLAttribute {\n name: string\n description?: string\n references?: Reference[]\n}\n\ninterface HTMLAttributeCategory {\n name: string\n attributes: HTMLAttribute[]\n references?: Reference[]\n}\n\nexport interface CSSProperty {\n name: string\n description?: string\n browsers?: string[]\n status?: string\n syntax?: string\n values?: CSSPropertyValue[]\n references?: Reference[]\n}\n\nexport interface CSSSpecProperty {\n name: string\n references?: Reference[]\n}\n\nexport interface CSSPropertyValue {\n name: string\n descriptipn: string\n references?: Reference[]\n}\n\nconst globalAttributes: HTMLAttribute[] = []\nconst attributeCategories: HTMLAttributeCategory[] = []\nconst elements: HTMLElement[] = []\nconst cssSpecProperties: CSSSpecProperty[] = []\n\nfunction handleHref(href: string) {\n return href.startsWith('https://') ? href : 'https://www.w3.org/TR/SVG/' + href\n}\n\nfunction parseStringList(str: string) {\n return str.split(',').map(s => s.trim())\n}\n\n\nexport function getSVGSpec() {\n const src = fs.readFileSync(DEFINITION_PATH, 'utf-8')\n const $ = cheerio.load(src, {\n xmlMode: true\n })\n\n $('definitions > attribute').each((_, e) => {\n const x = $(e), name = x.attr('name'), href = x.attr('href');\n if (name && href) {\n globalAttributes.push({\n name,\n references: [\n {\n name: 'SVG Spec',\n url: handleHref(href)\n }\n ]\n })\n }\n\n\n })\n\n $('attributecategory').each((_, e) => {\n const x = $(e), name = x.attr('name'), href = x.attr('href');\n if (name && href) {\n const attrCate = {\n name,\n attributes: [] as any,\n references: [\n {\n name: 'SVG Spec',\n url: handleHref(href)\n }\n ]\n }\n\n $(e)\n .find('attribute')\n .each((_, e) => {\n const x = $(e), name = x.attr('name'), href = x.attr('href');\n if (name && href) {\n attrCate.attributes.push({\n name,\n references: [\n {\n name: 'SVG Spec',\n url: handleHref(href)\n }\n ]\n })\n }\n })\n\n\n attributeCategories.push(attrCate)\n }\n\n })\n\n $('element').each((_, e) => {\n const x = $(e), name = x.attr('name'), href = x.attr('href'), attributes = x.attr('attributes'), attributecategories = x.attr('attributecategories');\n if (name && href) {\n const el = {\n name,\n attributes: [] as HTMLAttribute[],\n attributeCategories: [] as string[],\n references: [\n {\n name: 'SVG Spec',\n url: handleHref(href)\n }\n ]\n }\n\n if (attributes) {\n parseStringList(attributes).forEach(s => {\n const matchingAttr = globalAttributes.find(a => a.name === s)\n if (matchingAttr) {\n el.attributes.push(matchingAttr)\n }\n })\n }\n\n $(e)\n .find('attribute')\n .each((_, ea) => {\n const x = $(ea), name = x.attr('name'), href = x.attr('href');\n if (name && href) {\n el.attributes.push({\n name,\n references: [\n {\n name: 'SVG Spec',\n url: handleHref(href)\n }\n ]\n })\n }\n })\n\n if (attributecategories) {\n parseStringList(attributecategories).forEach(s => {\n el.attributeCategories.push(s)\n })\n }\n\n elements.push(el)\n }\n })\n\n $('property').each((_, e) => {\n const x = $(e), name = x.attr('name'), href = x.attr('href');\n if (name && href) {\n cssSpecProperties.push({\n name,\n references: [\n {\n name: 'SVG Spec',\n url: handleHref(href)\n }\n ]\n })\n\n }\n })\n\n return {\n elements,\n globalAttributes,\n cssSpecProperties\n }\n}\n" }, { "path": "samples/svg/build/util.ts", "content": "export function sleep(ms: number) {\n\treturn new Promise(resolve => {\n\t\tsetTimeout(() => {\n\t\t\tresolve()\n\t\t}, ms)\n\t})\n}\n\nconst browserNames : { [browser: string]: string }= {\n\tE: 'Edge',\n\tFF: 'Firefox',\n\tS: 'Safari',\n\tC: 'Chrome',\n\tIE: 'IE',\n\tO: 'Opera'\n}\n\nexport function toCompatString(bcdProperty: any) :string[] {\n\tlet s : string[] = []\n\n\tif (bcdProperty.__compat) {\n\t\tObject.keys(browserNames).forEach((abbrev) => {\n\t\t\tconst browserName = browserNames[abbrev].toLowerCase()\n\t\t\tconst browserSupport = bcdProperty.__compat.support[browserName]\n\t\t\tif (browserSupport) {\n\t\t\t\tconst shortCompatString = supportToShortCompatString(browserSupport, abbrev)\n\t\t\t\tif (shortCompatString) {\n\t\t\t\t\ts.push(shortCompatString)\n\t\t\t\t}\n\t\t\t}\n\t\t})\n\t} else {\n\t\tObject.keys(browserNames).forEach((abbrev) => {\n\t\t\tconst browserName = browserNames[abbrev].toLowerCase()\n\n\t\t\t// Select the most recent versions from all contexts as the short compat string\n\t\t\tlet shortCompatStringAggregatedFromContexts : string | undefined;\n\n\t\t\tObject.keys(bcdProperty).forEach(contextName => {\n\t\t\t\tconst context = bcdProperty[contextName]\n\t\t\t\tif (context.__compat && context.__compat.support[browserName]) {\n\t\t\t\t\tconst browserSupport = context.__compat.support[browserName]\n\t\t\t\t\tconst shortCompatString = supportToShortCompatString(browserSupport, abbrev)\n\t\t\t\t\tif (!shortCompatStringAggregatedFromContexts || shortCompatString > shortCompatStringAggregatedFromContexts) {\n\t\t\t\t\t\tshortCompatStringAggregatedFromContexts = shortCompatString\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t})\n\n\t\t\tif (shortCompatStringAggregatedFromContexts) {\n\t\t\t\ts.push(shortCompatStringAggregatedFromContexts)\n\t\t\t}\n\t\t})\n\n\t}\n return s;\n}\n\n/**\n * Check that a property is supported in all major browsers: Edge, Firefox, Safari, Chrome, IE, Opera\n */\nexport function isSupportedInAllBrowsers(bcdProperty: any) {\n\tif (bcdProperty.__compat) {\n\t\treturn Object.keys(browserNames).every((abbrev) => {\n\t\t\tconst browserName = browserNames[abbrev].toLowerCase()\n\t\t\tif (bcdProperty.__compat && bcdProperty.__compat.support[browserName]) {\n\t\t\t\tconst browserSupport = bcdProperty.__compat.support[browserName]\n\t\t\t\tif (browserSupport) {\n\t\t\t\t\treturn isSupported(browserSupport)\n\t\t\t\t}\n\t\t\t}\n\n\t\t\treturn false\n\t\t})\n\t} else {\n\t\treturn Object.keys(browserNames).every((abbrev) => {\n\t\t\tconst browserName = browserNames[abbrev].toLowerCase()\n\n\t\t\treturn Object.keys(bcdProperty).some(contextName => {\n\t\t\t\tconst context = bcdProperty[contextName]\n\t\t\t\tif (context.__compat && context.__compat.support[browserName]) {\n\t\t\t\t\tconst browserSupport = context.__compat.support[browserName]\n\t\t\t\t\tif (browserSupport) {\n\t\t\t\t\t\treturn isSupported(browserSupport)\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\treturn false\n\t\t\t})\n\t\t})\n\t}\n}\n\n/**\n * https://github.com/mdn/browser-compat-data/blob/master/schemas/compat-data-schema.md\n * \n * Convert a support statement to a short compat string.\n * For example:\n * { \"ie\": { \"version_added\": \"6.0\" } } => \"IE6.0\"\n * {\n * \"support\": {\n * \"firefox\": [\n * {\n * \"version_added\": \"6\"\n * },\n * {\n * \"prefix\": \"-moz-\",\n * \"version_added\": \"3.5\",\n * \"version_removed\": \"9\"\n * }\n * ]\n * }\n * } => \"FF6\"\n */\nfunction supportToShortCompatString(support: any, browserAbbrev: any) {\n let version_added\n if (Array.isArray(support) && support[0] && support[0].version_added) {\n version_added = support[0].version_added\n } else if (support.version_added) {\n version_added = support.version_added\n }\n\n if (version_added) {\n if (typeof(version_added) === 'boolean') {\n return browserAbbrev\n } else {\n return `${browserAbbrev}${version_added}`\n }\n }\n\n return null\n}\n\nfunction isSupported(support: any) {\n let version_added\n if (Array.isArray(support) && support[0] && support[0].version_added) {\n version_added = support[0].version_added\n } else if (support.version_added) {\n version_added = support.version_added\n }\n\n if (version_added) {\n if (typeof(version_added) === 'boolean') {\n return version_added\n } else if (typeof(version_added) === 'string') {\n if (typeof(parseInt(version_added)) === 'number') {\n return true\n }\n }\n }\n\n return false\n}" }, { "path": "samples/svg/data/svg.css-data.json", "content": "{\n \"version\": 1.1,\n \"properties\": [\n {\n \"name\": \"alignment-baseline\",\n \"references\": [\n {\n \"name\": \"SVG Spec\",\n \"url\": \"https://www.w3.org/TR/SVG/text.html#AlignmentBaselineProperty\"\n }\n ],\n \"description\": {\n \"kind\": \"markdown\",\n \"value\": \"The `**alignment-baseline**` attribute specifies how an object is aligned with respect to its parent. This property specifies which baseline of this element is to be aligned with the corresponding baseline of the parent. For example, this allows alphabetic baselines in Roman text to stay aligned across font size changes. It defaults to the baseline with the same name as the computed value of the `alignment-baseline` property.\"\n }\n },\n {\n \"name\": \"baseline-shift\",\n \"references\": [\n {\n \"name\": \"SVG Spec\",\n \"url\": \"https://www.w3.org/TR/SVG/text.html#BaselineShiftProperty\"\n }\n ],\n \"description\": {\n \"kind\": \"markdown\",\n \"value\": \"The **`baseline-shift`** attribute allows repositioning of the dominant-baseline relative to the dominant-baseline of the parent text content element. The shifted object might be a sub- or superscript.\"\n }\n },\n {\n \"name\": \"color\",\n \"references\": [\n {\n \"name\": \"SVG Spec\",\n \"url\": \"https://www.w3.org/TR/SVG/painting.html#ColorProperty\"\n }\n ],\n \"description\": {\n \"kind\": \"markdown\",\n \"value\": \"The **`color`** attribute is used to provide a potential indirect value, `currentColor`, for the `[fill](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill)`, `[stroke](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke)`, `[stop-color](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stop-color)`, `[flood-color](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/flood-color)`, and `[lighting-color](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/lighting-color)` attributes.\\n\\nSyntax: \\n\\nStatus: standard\"\n }\n },\n {\n \"name\": \"color-interpolation\",\n \"references\": [\n {\n \"name\": \"SVG Spec\",\n \"url\": \"https://www.w3.org/TR/SVG/painting.html#ColorInterpolationProperty\"\n }\n ],\n \"description\": {\n \"kind\": \"markdown\",\n \"value\": \"The **`color-interpolation`** attribute specifies the color space for gradient interpolations, color animations, and alpha compositing.\"\n }\n },\n {\n \"name\": \"color-rendering\",\n \"references\": [\n {\n \"name\": \"SVG Spec\",\n \"url\": \"https://www.w3.org/TR/SVG/painting.html#ColorRenderingProperty\"\n }\n ],\n \"description\": {\n \"kind\": \"markdown\",\n \"value\": \"The **`color-rendering`** attribute provides a hint to the SVG user agent about how to optimize its color interpolation and compositing operations.\"\n }\n },\n {\n \"name\": \"cursor\",\n \"references\": [\n {\n \"name\": \"SVG Spec\",\n \"url\": \"https://www.w3.org/TR/css-ui-3/#cursor\"\n }\n ],\n \"description\": {\n \"kind\": \"markdown\",\n \"value\": \"The `cursor` attribute specifies the mouse cursor displayed when the mouse pointer is over an element.\\n\\nSyntax: [ [ [ ]? , ]* [ auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll | zoom-in | zoom-out | grab | grabbing ] ]\\n\\nStatus: standard\"\n }\n },\n {\n \"name\": \"dominant-baseline\",\n \"references\": [\n {\n \"name\": \"SVG Spec\",\n \"url\": \"https://www.w3.org/TR/SVG/text.html#DominantBaselineProperty\"\n }\n ],\n \"description\": {\n \"kind\": \"markdown\",\n \"value\": \"The **`dominant-baseline`** attribute specifies the dominant baseline, which is the baseline used to align the box’s text and inline-level contents. It is also indicates the default alignment baseline of any boxes participating in baseline alignment in the box’s alignment context.\"\n }\n },\n {\n \"name\": \"fill\",\n \"references\": [\n {\n \"name\": \"SVG Spec\",\n \"url\": \"https://www.w3.org/TR/SVG/painting.html#FillProperty\"\n }\n ],\n \"description\": {\n \"kind\": \"markdown\",\n \"value\": \"The **`fill`** attribute has two different meaning: For shapes and text it's a presentation attribute that lets define the color (_or any SVG paint servers like gradients or patterns_) used to paint the element; for animation it lets define what is the final state of the animation.\"\n }\n },\n {\n \"name\": \"fill-opacity\",\n \"references\": [\n {\n \"name\": \"SVG Spec\",\n \"url\": \"https://www.w3.org/TR/SVG/painting.html#FillOpacityProperty\"\n }\n ],\n \"description\": {\n \"kind\": \"markdown\",\n \"value\": \"The **`fill-opacity`** attribute is a presentation attribute defining the opacity of the paint server (_color_, _gradient_, _pattern_, etc) applied to a shape.\"\n }\n },\n {\n \"name\": \"fill-rule\",\n \"references\": [\n {\n \"name\": \"SVG Spec\",\n \"url\": \"https://www.w3.org/TR/SVG/painting.html#FillRuleProperty\"\n }\n ],\n \"description\": {\n \"kind\": \"markdown\",\n \"value\": \"The **`fill-rule`** attribute is a presentation attribute defining the algorithm to use to determine the _inside_ part of a shape.\"\n }\n },\n {\n \"name\": \"glyph-orientation-horizontal\",\n \"references\": [\n {\n \"name\": \"SVG Spec\",\n \"url\": \"https://www.w3.org/TR/SVG/text.html#GlyphOrientationHorizontalProperty\"\n }\n ],\n \"description\": {\n \"kind\": \"markdown\",\n \"value\": \"The **`glyph-orientation-horizontal`** attribute affects the amount that hte current text position advances as each [glyph](https://developer.mozilla.org/en-US/docs/Glossary/glyph \\\"The definition of that term (glyph) has not been written yet; please consider contributing it!\\\") is rendered.\"\n }\n },\n {\n \"name\": \"glyph-orientation-vertical\",\n \"references\": [\n {\n \"name\": \"SVG Spec\",\n \"url\": \"https://www.w3.org/TR/SVG/text.html#GlyphOrientationVerticalProperty\"\n }\n ],\n \"description\": {\n \"kind\": \"markdown\",\n \"value\": \"The **`glyph-orientation-vertical`** attribute affects the amount that hte current text position advances as each [glyph](https://developer.mozilla.org/en-US/docs/Glossary/glyph \\\"The definition of that term (glyph) has not been written yet; please consider contributing it!\\\") is rendered.\"\n }\n },\n {\n \"name\": \"image-rendering\",\n \"references\": [\n {\n \"name\": \"SVG Spec\",\n \"url\": \"https://www.w3.org/TR/SVG/painting.html#ImageRenderingProperty\"\n }\n ],\n \"description\": {\n \"kind\": \"markdown\",\n \"value\": \"The **`image-rendering`** attribute provides a hint to the browser about how to make speed vs. quality tradeoffs as it performs image processing.\\n\\nSyntax: auto | crisp-edges | pixelated\\n\\nStatus: standard\\n\\nSupported browsers: FF3.6,S,C,O\"\n }\n },\n {\n \"name\": \"inline-size\",\n \"references\": [\n {\n \"name\": \"SVG Spec\",\n \"url\": \"https://www.w3.org/TR/SVG/text.html#InlineSizeProperty\"\n }\n ],\n \"description\": {\n \"kind\": \"markdown\",\n \"value\": \"The **`inline-size`** [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS \\\"CSS\\\") property defines the horizontal or vertical size of an element's block, depending on its writing mode. It corresponds to either the [`width`](https://developer.mozilla.org/en-US/docs/Web/CSS/width \\\"The width CSS property sets an element's width. By default, it sets the width of the content area, but if box-sizing is set to border-box, it sets the width of the border area.\\\") or the [`height`](https://developer.mozilla.org/en-US/docs/Web/CSS/height \\\"The height CSS property specifies the height of an element. By default, the property defines the height of the content area. If box-sizing is set to border-box, however, it instead determines the height of the border area.\\\") property, depending on the value of [`writing-mode`](https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode \\\"The writing-mode CSS property sets whether lines of text are laid out horizontally or vertically, as well as the direction in which blocks progress. When set for an entire document, it should be set on the root element (html element for HTML documents).\\\").\\n\\nSyntax: <'width'>\\n\\nStatus: standard\\n\\nSupported browsers: FF41,C57,O44\"\n }\n },\n {\n \"name\": \"marker\",\n \"references\": [\n {\n \"name\": \"SVG Spec\",\n \"url\": \"https://www.w3.org/TR/SVG/painting.html#MarkerProperty\"\n }\n ],\n \"description\": {\n \"kind\": \"markdown\",\n \"value\": \"\"\n }\n },\n {\n \"name\": \"marker-end\",\n \"references\": [\n {\n \"name\": \"SVG Spec\",\n \"url\": \"https://www.w3.org/TR/SVG/painting.html#MarkerEndProperty\"\n }\n ],\n \"description\": {\n \"kind\": \"markdown\",\n \"value\": \"The **`marker-end`** attribute defines the arrowhead or polymarker that will be drawn at the final vertex of the given [shape](https://developer.mozilla.org/en-US/docs/Web/SVG/Element#Shape_elements).\"\n }\n },\n {\n \"name\": \"marker-mid\",\n \"references\": [\n {\n \"name\": \"SVG Spec\",\n \"url\": \"https://www.w3.org/TR/SVG/painting.html#MarkerMidProperty\"\n }\n ],\n \"description\": {\n \"kind\": \"markdown\",\n \"value\": \"The **`marker-mid`** attribute defines the arrowhead or polymarker that will be drawn at the final vertex of the given [shape](https://developer.mozilla.org/en-US/docs/Web/SVG/Element#Shape_elements).\"\n }\n },\n {\n \"name\": \"marker-start\",\n \"references\": [\n {\n \"name\": \"SVG Spec\",\n \"url\": \"https://www.w3.org/TR/SVG/painting.html#MarkerStartProperty\"\n }\n ],\n \"description\": {\n \"kind\": \"markdown\",\n \"value\": \"The **`marker-start`** attribute defines the arrowhead or polymarker that will be drawn at the first vertex of the given [shape](https://developer.mozilla.org/en-US/docs/Web/SVG/Element#Shape_elements).\"\n }\n },\n {\n \"name\": \"overflow\",\n \"references\": [\n {\n \"name\": \"SVG Spec\",\n \"url\": \"https://www.w3.org/TR/SVG/render.html#OverflowAndClipProperties\"\n }\n ],\n \"description\": {\n \"kind\": \"markdown\",\n \"value\": \"The **`overflow`** attribute sets what to do when an element's content is too big to fit in its block formatting context.\\n\\nSyntax: [ visible | hidden | clip | scroll | auto ]{1,2}\\n\\nStatus: standard\"\n }\n },\n {\n \"name\": \"paint-order\",\n \"references\": [\n {\n \"name\": \"SVG Spec\",\n \"url\": \"https://www.w3.org/TR/SVG/painting.html#PaintOrderProperty\"\n }\n ],\n \"description\": {\n \"kind\": \"markdown\",\n \"value\": \"The **`paint-order`** attribute specifies the order that the fill, stroke, and markers of a given shape or text element are painted.\\n\\nSyntax: normal | [ fill || stroke || markers ]\\n\\nStatus: experimental\\n\\nSupported browsers: FF60,S\"\n }\n },\n {\n \"name\": \"pointer-events\",\n \"references\": [\n {\n \"name\": \"SVG Spec\",\n \"url\": \"https://www.w3.org/TR/SVG/interact.html#PointerEventsProperty\"\n }\n ],\n \"description\": {\n \"kind\": \"markdown\",\n \"value\": \"The **`pointer-events`** attribute is a presentation attribute that lets define whether or when an element may be the target of a mouse event.\\n\\nSyntax: auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | inherit\\n\\nStatus: standard\"\n }\n },\n {\n \"name\": \"shape-rendering\",\n \"references\": [\n {\n \"name\": \"SVG Spec\",\n \"url\": \"https://www.w3.org/TR/SVG/painting.html#ShapeRenderingProperty\"\n }\n ],\n \"description\": {\n \"kind\": \"markdown\",\n \"value\": \"The **`shape-rendering`** attribute provides hints to the renderer about what tradeoffs to make when rendering shapes like paths, circles, or rectangles.\"\n }\n },\n {\n \"name\": \"stop-color\",\n \"references\": [\n {\n \"name\": \"SVG Spec\",\n \"url\": \"https://www.w3.org/TR/SVG/pservers.html#StopColorProperty\"\n }\n ],\n \"description\": {\n \"kind\": \"markdown\",\n \"value\": \"The **`stop-color`** attribute indicates what color to use at a gradient stop.\"\n }\n },\n {\n \"name\": \"stop-opacity\",\n \"references\": [\n {\n \"name\": \"SVG Spec\",\n \"url\": \"https://www.w3.org/TR/SVG/pservers.html#StopOpacityProperty\"\n }\n ],\n \"description\": {\n \"kind\": \"markdown\",\n \"value\": \"The **`stop-opacity`** attribute defines the opacity of a given color gradient stop.\"\n }\n },\n {\n \"name\": \"stroke\",\n \"references\": [\n {\n \"name\": \"SVG Spec\",\n \"url\": \"https://www.w3.org/TR/SVG/painting.html#StrokeProperty\"\n }\n ],\n \"description\": {\n \"kind\": \"markdown\",\n \"value\": \"The **`stroke`** attribute is a presentation attribute defining the color (_or any SVG paint servers like gradients or patterns_) used to paint the outline of the shape;\"\n }\n },\n {\n \"name\": \"stroke-dasharray\",\n \"references\": [\n {\n \"name\": \"SVG Spec\",\n \"url\": \"https://www.w3.org/TR/SVG/painting.html#StrokeDasharrayProperty\"\n }\n ],\n \"description\": {\n \"kind\": \"markdown\",\n \"value\": \"The **`stroke-dasharray`** attribute is a presentation attribute defining the pattern of dashes and gaps used to paint the outline of the shape;\"\n }\n },\n {\n \"name\": \"stroke-dashoffset\",\n \"references\": [\n {\n \"name\": \"SVG Spec\",\n \"url\": \"https://www.w3.org/TR/SVG/painting.html#StrokeDashoffsetProperty\"\n }\n ],\n \"description\": {\n \"kind\": \"markdown\",\n \"value\": \"The **`stroke-dashoffset`** attribute is a presentation attribute defining an offset on the rendering of the associated dash array.\"\n }\n },\n {\n \"name\": \"stroke-linecap\",\n \"references\": [\n {\n \"name\": \"SVG Spec\",\n \"url\": \"https://www.w3.org/TR/SVG/painting.html#StrokeLinecapProperty\"\n }\n ],\n \"description\": {\n \"kind\": \"markdown\",\n \"value\": \"The **`stroke-linecap`** attribute is a presentation attribute defining the shape to be used at the end of open subpaths when they are stroked.\"\n }\n },\n {\n \"name\": \"stroke-linejoin\",\n \"references\": [\n {\n \"name\": \"SVG Spec\",\n \"url\": \"https://www.w3.org/TR/SVG/painting.html#StrokeLinejoinProperty\"\n }\n ],\n \"description\": {\n \"kind\": \"markdown\",\n \"value\": \"The **`stroke-linejoin`** attribute is a presentation attribute defining the shape to be used at the corners of paths when they are stroked.\"\n }\n },\n {\n \"name\": \"stroke-miterlimit\",\n \"references\": [\n {\n \"name\": \"SVG Spec\",\n \"url\": \"https://www.w3.org/TR/SVG/painting.html#StrokeMiterlimitProperty\"\n }\n ],\n \"description\": {\n \"kind\": \"markdown\",\n \"value\": \"The **`stroke-miterlimit`** attribute is a presentation attribute defining a limit on the ratio of the miter length to the `[stroke-width](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-width)` used to draw a miter join. When the limit is exceeded, the join is converted from a miter to a bevel.\"\n }\n },\n {\n \"name\": \"stroke-opacity\",\n \"references\": [\n {\n \"name\": \"SVG Spec\",\n \"url\": \"https://www.w3.org/TR/SVG/painting.html#StrokeOpacityProperty\"\n }\n ],\n \"description\": {\n \"kind\": \"markdown\",\n \"value\": \"The **`stroke-opacity`** attribute is a presentation attribute defining the opacity of the paint server (_color_, _gradient_, _pattern_, etc) applied to the stroke of a shape.\"\n }\n },\n {\n \"name\": \"stroke-width\",\n \"references\": [\n {\n \"name\": \"SVG Spec\",\n \"url\": \"https://www.w3.org/TR/SVG/painting.html#StrokeWidthProperty\"\n }\n ],\n \"description\": {\n \"kind\": \"markdown\",\n \"value\": \"The **`stroke-width`** attribute is a presentation attribute defining the width of the stroke to be applied to the shape.\"\n }\n },\n {\n \"name\": \"text-anchor\",\n \"references\": [\n {\n \"name\": \"SVG Spec\",\n \"url\": \"https://www.w3.org/TR/SVG/text.html#TextAnchorProperty\"\n }\n ],\n \"description\": {\n \"kind\": \"markdown\",\n \"value\": \"The **`text-anchor`** attribute is used to align (start-, middle- or end-alignment) a string of pre-formatted text or auto-wrapped text where the wrapping area is determined from the `[inline-size](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/inline-size)` property relative to a given point.\"\n }\n },\n {\n \"name\": \"text-rendering\",\n \"references\": [\n {\n \"name\": \"SVG Spec\",\n \"url\": \"https://www.w3.org/TR/SVG/painting.html#TextRenderingProperty\"\n }\n ],\n \"description\": {\n \"kind\": \"markdown\",\n \"value\": \"The `**text-rendering**` attribute provides hints to the renderer about what tradeoffs to make when rendering text.\\n\\nSyntax: auto | optimizeSpeed | optimizeLegibility | geometricPrecision\\n\\nStatus: standard\\n\\nSupported browsers: FF3,S5,C4,O15\"\n }\n },\n {\n \"name\": \"transform\",\n \"references\": [\n {\n \"name\": \"SVG Spec\",\n \"url\": \"https://www.w3.org/TR/SVG/coords.html#TransformProperty\"\n }\n ],\n \"description\": {\n \"kind\": \"markdown\",\n \"value\": \"The **`transform`** attribute defines a list of transform definitions that are applied to an element and the element's children.\\n\\nSyntax: none | \\n\\nStatus: standard\"\n }\n },\n {\n \"name\": \"vector-effect\",\n \"references\": [\n {\n \"name\": \"SVG Spec\",\n \"url\": \"https://www.w3.org/TR/SVG/coords.html#VectorEffectProperty\"\n }\n ],\n \"description\": {\n \"kind\": \"markdown\",\n \"value\": \"The **`vector-effect`** property specifies the vector effect to use when drawing an object. Vector effects are applied before any of the other compositing operations, i.e. filters, masks and clips.\"\n }\n },\n {\n \"name\": \"x\",\n \"references\": [\n {\n \"name\": \"SVG Spec\",\n \"url\": \"https://www.w3.org/TR/SVG/geometry.html#XProperty\"\n }\n ],\n \"description\": {\n \"kind\": \"markdown\",\n \"value\": \"The **`x`** attribute defines a x-axis coordinate in the user coordinate system.\"\n }\n },\n {\n \"name\": \"y\",\n \"references\": [\n {\n \"name\": \"SVG Spec\",\n \"url\": \"https://www.w3.org/TR/SVG/geometry.html#YProperty\"\n }\n ],\n \"description\": {\n \"kind\": \"markdown\",\n \"value\": \"The **`y`** attribute defines a y-axis coordinate in the user coordinate system.\"\n }\n },\n {\n \"name\": \"cx\",\n \"references\": [\n {\n \"name\": \"SVG Spec\",\n \"url\": \"https://www.w3.org/TR/SVG/geometry.html#CxProperty\"\n }\n ],\n \"description\": {\n \"kind\": \"markdown\",\n \"value\": \"The **`cx`** attribute define the x-axis coordinate of a center point.\"\n }\n },\n {\n \"name\": \"cy\",\n \"references\": [\n {\n \"name\": \"SVG Spec\",\n \"url\": \"https://www.w3.org/TR/SVG/geometry.html#CyProperty\"\n }\n ],\n \"description\": {\n \"kind\": \"markdown\",\n \"value\": \"The **`cy`** attribute define the y-axis coordinate of a center point.\"\n }\n },\n {\n \"name\": \"r\",\n \"references\": [\n {\n \"name\": \"SVG Spec\",\n \"url\": \"https://www.w3.org/TR/SVG/geometry.html#RProperty\"\n }\n ],\n \"description\": {\n \"kind\": \"markdown\",\n \"value\": \"The **`r`** attribute defines the radius of a circle.\"\n }\n },\n {\n \"name\": \"rx\",\n \"references\": [\n {\n \"name\": \"SVG Spec\",\n \"url\": \"https://www.w3.org/TR/SVG/geometry.html#RxProperty\"\n }\n ],\n \"description\": {\n \"kind\": \"markdown\",\n \"value\": \"The **`rx`** attribute defines a radius on the x-axis.\"\n }\n },\n {\n \"name\": \"ry\",\n \"references\": [\n {\n \"name\": \"SVG Spec\",\n \"url\": \"https://www.w3.org/TR/SVG/geometry.html#RyProperty\"\n }\n ],\n \"description\": {\n \"kind\": \"markdown\",\n \"value\": \"The **`ry`** attribute defines a radius on the y-axis.\"\n }\n },\n {\n \"name\": \"d\",\n \"references\": [\n {\n \"name\": \"SVG Spec\",\n \"url\": \"https://www.w3.org/TR/SVG/paths.html#DProperty\"\n }\n ],\n \"description\": {\n \"kind\": \"markdown\",\n \"value\": \"The **`d`** attribute defines a path to be drawn.\"\n }\n },\n {\n \"name\": \"display\",\n \"references\": [\n {\n \"name\": \"SVG Spec\",\n \"url\": \"https://www.w3.org/TR/SVG/render.html#VisibilityControl\"\n }\n ],\n \"description\": {\n \"kind\": \"markdown\",\n \"value\": \"The `**display**` attribute lets you control the rendering of graphical or container elements.\\n\\nSyntax: [ || ] | | | | \\n\\nStatus: standard\"\n }\n },\n {\n \"name\": \"opacity\",\n \"references\": [\n {\n \"name\": \"SVG Spec\",\n \"url\": \"https://www.w3.org/TR/SVG/render.html#ObjectAndGroupOpacityProperties\"\n }\n ],\n \"description\": {\n \"kind\": \"markdown\",\n \"value\": \"The **`opacity`** attribute specifies the transparency of an object or of a group of objects, that is, the degree to which the background behind the element is overlaid.\\n\\nSyntax: \\n\\nStatus: standard\"\n }\n },\n {\n \"name\": \"visibility\",\n \"references\": [\n {\n \"name\": \"SVG Spec\",\n \"url\": \"https://www.w3.org/TR/SVG/render.html#VisibilityControl\"\n }\n ],\n \"description\": {\n \"kind\": \"markdown\",\n \"value\": \"The **`visibility`** attribute lets you control the visibility of graphical elements. With a value of `hidden` or `collapse` the current graphics element is invisible.\\n\\nSyntax: visible | hidden | collapse\\n\\nStatus: standard\"\n }\n },\n {\n \"name\": \"height\",\n \"references\": [\n {\n \"name\": \"SVG Spec\",\n \"url\": \"https://www.w3.org/TR/SVG/geometry.html#Sizing\"\n }\n ],\n \"description\": {\n \"kind\": \"markdown\",\n \"value\": \"The **`height`** attribute defines the vertical length of an element in the user coordinate system.\\n\\nSyntax: [ | ] && [ border-box | content-box ]? | available | min-content | max-content | fit-content | auto\\n\\nStatus: standard\"\n }\n },\n {\n \"name\": \"width\",\n \"references\": [\n {\n \"name\": \"SVG Spec\",\n \"url\": \"https://www.w3.org/TR/SVG/geometry.html#Sizing\"\n }\n ],\n \"description\": {\n \"kind\": \"markdown\",\n \"value\": \"The **`width`** attribute defines the horizontal length of an element in the user coordinate system.\\n\\nSyntax: [ | ] && [ border-box | content-box ]? | available | min-content | max-content | fit-content | auto\\n\\nStatus: standard\"\n }\n },\n {\n \"name\": \"line-height\",\n \"references\": [\n {\n \"name\": \"SVG Spec\",\n \"url\": \"https://www.w3.org/TR/SVG/text.html#LineHeightProperty\"\n }\n ],\n \"description\": {\n \"kind\": \"markdown\",\n \"value\": \"The **`line-height`** [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets the height of a line box. It's commonly used to set the distance between lines of text.\\n\\nSyntax: normal | | | \\n\\nStatus: standard\"\n }\n },\n {\n \"name\": \"shape-image-threshold\",\n \"references\": [\n {\n \"name\": \"SVG Spec\",\n \"url\": \"https://www.w3.org/TR/SVG/text.html#TextShapeImageThreshold\"\n }\n ],\n \"description\": {\n \"kind\": \"markdown\",\n \"value\": \"The **`shape-image-threshold`** [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets the alpha channel threshold used to extract the shape using an image as the value for [`shape-outside`](https://developer.mozilla.org/en-US/docs/Web/CSS/shape-outside \\\"The shape-outside CSS property defines a shape—which may be non-rectangular—around which adjacent inline content should wrap.\\\").\\n\\nSyntax: \\n\\nStatus: standard\\n\\nSupported browsers: FF62,S10.1,C37,O24\"\n }\n },\n {\n \"name\": \"shape-inside\",\n \"references\": [\n {\n \"name\": \"SVG Spec\",\n \"url\": \"https://www.w3.org/TR/SVG/text.html#TextShapeInside\"\n }\n ],\n \"description\": {\n \"kind\": \"markdown\",\n \"value\": \"\"\n }\n },\n {\n \"name\": \"shape-margin\",\n \"references\": [\n {\n \"name\": \"SVG Spec\",\n \"url\": \"https://www.w3.org/TR/SVG/text.html#TextShapeMargin\"\n }\n ],\n \"description\": {\n \"kind\": \"markdown\",\n \"value\": \"The **`shape-margin`** [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets a margin for a CSS shape created using [`shape-outside`](https://developer.mozilla.org/en-US/docs/Web/CSS/shape-outside \\\"The shape-outside CSS property defines a shape—which may be non-rectangular—around which adjacent inline content should wrap.\\\").\\n\\nSyntax: \\n\\nStatus: standard\\n\\nSupported browsers: FF62,S10.1,C37,O24\"\n }\n },\n {\n \"name\": \"shape-subtract\",\n \"references\": [\n {\n \"name\": \"SVG Spec\",\n \"url\": \"https://www.w3.org/TR/SVG/text.html#TextShapeSubtract\"\n }\n ],\n \"description\": {\n \"kind\": \"markdown\",\n \"value\": \"\"\n }\n },\n {\n \"name\": \"shape-padding\",\n \"references\": [\n {\n \"name\": \"SVG Spec\",\n \"url\": \"https://www.w3.org/TR/SVG/text.html#TextShapePadding\"\n }\n ],\n \"description\": {\n \"kind\": \"markdown\",\n \"value\": \"\"\n }\n },\n {\n \"name\": \"text-overflow\",\n \"references\": [\n {\n \"name\": \"SVG Spec\",\n \"url\": \"https://www.w3.org/TR/SVG/text.html#TextOverflowProperty\"\n }\n ],\n \"description\": {\n \"kind\": \"markdown\",\n \"value\": \"The **`text-overflow`** [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets how hidden overflow content is signaled to users. It can be clipped, display an ellipsis ('`…`'), or display a custom string.\\n\\nSyntax: [ clip | ellipsis | ]{1,2}\\n\\nStatus: standard\"\n }\n },\n {\n \"name\": \"font-kerning\",\n \"references\": [\n {\n \"name\": \"SVG Spec\",\n \"url\": \"https://www.w3.org/TR/css-fonts-3/#font-kerning-prop\"\n }\n ],\n \"description\": {\n \"kind\": \"markdown\",\n \"value\": \"The **`font-kerning`** CSS property sets the use of the kerning information stored in a font.\\n\\nSyntax: auto | normal | none\\n\\nStatus: standard\\n\\nSupported browsers: FF32,S7,C32\"\n }\n },\n {\n \"name\": \"font\",\n \"references\": [\n {\n \"name\": \"SVG Spec\",\n \"url\": \"https://www.w3.org/TR/css-fonts-3/#font-prop\"\n }\n ],\n \"description\": {\n \"kind\": \"markdown\",\n \"value\": \"The **`font`** CSS property is a shorthand for [`font-style`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-style \\\"The font-style CSS property sets whether a font should be styled with a normal, italic, or oblique face from its font-family.\\\"), [`font-variant`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant \\\"The font-variant CSS property is a shorthand for the longhand properties font-variant-caps, font-variant-numeric, font-variant-alternates, font-variant-ligatures, and font-variant-east-asian. You can also set the CSS Level 2 (Revision 1) values of font-variant, (that is, normal or small-caps), by using the font shorthand.\\\"), [`font-weight`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight \\\"The font-weight CSS property sets the weight (or boldness) of the font. The weights available depend on the font-family you are using.\\\"), [`font-stretch`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-stretch \\\"The font-stretch CSS property selects a normal, condensed, or expanded face from a font.\\\"), [`font-size`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size \\\"The font-size CSS property sets the size of the font.\\\"), [`line-height`](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height \\\"The line-height CSS property sets the height of a line box. It's commonly used to set the distance between lines of text.\\\"), and [`font-family`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-family \\\"The font-family CSS property specifies a prioritized list of one or more font family names and/or generic family names for the selected element.\\\"). Alternatively, it sets an element's font to a system font.\\n\\nSyntax: [ [ <'font-style'> || || <'font-weight'> || <'font-stretch'> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ] | caption | icon | menu | message-box | small-caption | status-bar\\n\\nStatus: standard\"\n }\n },\n {\n \"name\": \"font-family\",\n \"references\": [\n {\n \"name\": \"SVG Spec\",\n \"url\": \"https://www.w3.org/TR/css-fonts-3/#font-family-prop\"\n }\n ],\n \"description\": {\n \"kind\": \"markdown\",\n \"value\": \"The **`font-family`** attribute indicates which font family will be used to render the text, specified as a prioritized list of font family names and/or generic family names.\\n\\nSyntax: [ | ]#\\n\\nStatus: standard\"\n }\n },\n {\n \"name\": \"font-feature-settings\",\n \"references\": [\n {\n \"name\": \"SVG Spec\",\n \"url\": \"https://www.w3.org/TR/css-fonts-3/#font-feature-settings-prop\"\n }\n ],\n \"description\": {\n \"kind\": \"markdown\",\n \"value\": \"The **`font-feature-settings`** CSS property controls advanced typographic features in OpenType fonts.\\n\\nSyntax: normal | #\\n\\nStatus: standard\"\n }\n },\n {\n \"name\": \"font-size\",\n \"references\": [\n {\n \"name\": \"SVG Spec\",\n \"url\": \"https://www.w3.org/TR/css-fonts-3/#font-size-prop\"\n }\n ],\n \"description\": {\n \"kind\": \"markdown\",\n \"value\": \"The **`font-size`** attribute refers to the size of the font from [baseline](https://developer.mozilla.org/en-US/docs/Glossary/baseline \\\"The definition of that term (baseline) has not been written yet; please consider contributing it!\\\") to baseline when multiple lines of text are set solid in a multiline layout environment.\\n\\nSyntax: | | \\n\\nStatus: standard\"\n }\n },\n {\n \"name\": \"font-size-adjust\",\n \"references\": [\n {\n \"name\": \"SVG Spec\",\n \"url\": \"https://www.w3.org/TR/css-fonts-3/#font-size-adjust-prop\"\n }\n ],\n \"description\": {\n \"kind\": \"markdown\",\n \"value\": \"The `font-size-adjust` attribute allows authors to specify an aspect value for an element that will preserve the x-height of the first choice font in a substitute font.\\n\\nSyntax: none | \\n\\nStatus: standard\\n\\nSupported browsers: FF40,C43,O30\"\n }\n },\n {\n \"name\": \"font-stretch\",\n \"references\": [\n {\n \"name\": \"SVG Spec\",\n \"url\": \"https://www.w3.org/TR/css-fonts-3/#font-stretch-prop\"\n }\n ],\n \"description\": {\n \"kind\": \"markdown\",\n \"value\": \"The **`font-stretch`** attribute indicates the desired amount of condensing or expansion in the glyphs used to render the text.\\n\\nSyntax: \\n\\nStatus: standard\"\n }\n },\n {\n \"name\": \"font-style\",\n \"references\": [\n {\n \"name\": \"SVG Spec\",\n \"url\": \"https://www.w3.org/TR/css-fonts-3/#font-style-prop\"\n }\n ],\n \"description\": {\n \"kind\": \"markdown\",\n \"value\": \"The **`font-size`** attribute specifies whether the text is to be rendered using a normal, italic or oblique face.\\n\\nSyntax: normal | italic | oblique ?\\n\\nStatus: standard\"\n }\n },\n {\n \"name\": \"font-variant\",\n \"references\": [\n {\n \"name\": \"SVG Spec\",\n \"url\": \"https://www.w3.org/TR/css-fonts-3/#propdef-font-variant\"\n }\n ],\n \"description\": {\n \"kind\": \"markdown\",\n \"value\": \"The **`font-variant`** attribute indicates whether the text is to be rendered using variations of the fontʼs [glyphs](https://developer.mozilla.org/en-US/docs/Glossary/glyph \\\"The definition of that term (glyphs) has not been written yet; please consider contributing it!\\\").\\n\\nSyntax: normal | none | [ || || || || stylistic( ) || historical-forms || styleset( # ) || character-variant( # ) || swash( ) || ornaments( ) || annotation( ) || [ small-caps | all-small-caps | petite-caps | all-petite-caps | unicase | titling-caps ] || || || || ordinal || slashed-zero || || || ruby ]\\n\\nStatus: standard\"\n }\n },\n {\n \"name\": \"font-variant-ligatures\",\n \"references\": [\n {\n \"name\": \"SVG Spec\",\n \"url\": \"https://www.w3.org/TR/css-fonts-3/#font-variant-ligatures-prop\"\n }\n ],\n \"description\": {\n \"kind\": \"markdown\",\n \"value\": \"The **`font-variant-ligatures`** CSS property controls which [ligatures](https://developer.mozilla.org/en-US/docs/Glossary/ligature \\\"ligatures: A ligature is a joining of two characters into one shape. For example, in French \\\"œ\\\" is a ligature of \\\"oe\\\".\\\") and [contextual forms](https://developer.mozilla.org/en-US/docs/Glossary/contextual_forms \\\"The definition of that term (contextual forms) has not been written yet; please consider contributing it!\\\") are used in textual content of the elements it applies to. This leads to more harmonized forms in the resulting text.\\n\\nSyntax: normal | none | [ || || || ]\\n\\nStatus: standard\\n\\nSupported browsers: FF34,S9.1,C34,O21\"\n }\n },\n {\n \"name\": \"font-weight\",\n \"references\": [\n {\n \"name\": \"SVG Spec\",\n \"url\": \"https://www.w3.org/TR/css-fonts-3/#font-weight-prop\"\n }\n ],\n \"description\": {\n \"kind\": \"markdown\",\n \"value\": \"The **`font-weight`** attribute refers to the boldness or lightness of the glyphs used to render the text, relative to other fonts in the same font family.\\n\\nSyntax: | bolder | lighter\\n\\nStatus: standard\"\n }\n },\n {\n \"name\": \"hanging-punctuation\",\n \"references\": [\n {\n \"name\": \"SVG Spec\",\n \"url\": \"https://www.w3.org/TR/css-text-3/#hanging-punctuation-property\"\n }\n ],\n \"description\": {\n \"kind\": \"markdown\",\n \"value\": \"The **`hanging-punctuation`** [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property specifies whether a punctuation mark should hang at the start or end of a line of text.\\n\\nSyntax: none | [ first || [ force-end | allow-end ] || last ]\\n\\nStatus: standard\\n\\nSupported browsers: S10\"\n }\n },\n {\n \"name\": \"hyphens\",\n \"references\": [\n {\n \"name\": \"SVG Spec\",\n \"url\": \"https://www.w3.org/TR/css-text-3/#hyphens-property\"\n }\n ],\n \"description\": {\n \"kind\": \"markdown\",\n \"value\": \"The **`hyphens`** [CSS](https://developer.mozilla.org/en-US/docs/CSS) property specifies how words should be hyphenated when text wraps across multiple lines. You can prevent hyphenation entirely, use hyphenation in manually-specified points within the text, or let the browser automatically insert hyphens where appropriate.\\n\\nSyntax: none | manual | auto\\n\\nStatus: standard\"\n }\n },\n {\n \"name\": \"letter-spacing\",\n \"references\": [\n {\n \"name\": \"SVG Spec\",\n \"url\": \"https://www.w3.org/TR/css-text-3/#letter-spacing-property\"\n }\n ],\n \"description\": {\n \"kind\": \"markdown\",\n \"value\": \"The **`letter-spacing`** attribute controls spacing between text characters, in addition to any spacing from the `[kerning](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/kerning)` attribute.\\n\\nSyntax: normal | \\n\\nStatus: standard\"\n }\n },\n {\n \"name\": \"line-break\",\n \"references\": [\n {\n \"name\": \"SVG Spec\",\n \"url\": \"https://www.w3.org/TR/css-text-3/#line-break-property\"\n }\n ],\n \"description\": {\n \"kind\": \"markdown\",\n \"value\": \"The **`line-break`** CSS property sets how to break lines of Chinese, Japanese, or Korean (CJK) text when working with punctuation and symbols.\\n\\nSyntax: auto | loose | normal | strict\\n\\nStatus: standard\\n\\nSupported browsers: E14,S,C58,IE5.5,O45\"\n }\n },\n {\n \"name\": \"overflow-wrap\",\n \"references\": [\n {\n \"name\": \"SVG Spec\",\n \"url\": \"https://www.w3.org/TR/css-text-3/#overflow-wrap-property\"\n }\n ],\n \"description\": {\n \"kind\": \"markdown\",\n \"value\": \"The `**overflow-wrap**` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property applies to inline elements, setting whether the browser should insert line breaks within an otherwise unbreakable string to prevent text from overflowing its line box.\\n\\nSyntax: normal | break-word\\n\\nStatus: standard\"\n }\n },\n {\n \"name\": \"tab-size\",\n \"references\": [\n {\n \"name\": \"SVG Spec\",\n \"url\": \"https://www.w3.org/TR/css-text-3/#tab-size-property\"\n }\n ],\n \"description\": {\n \"kind\": \"markdown\",\n \"value\": \"The **`tab-size`** CSS property is used to customize the width of a tab (`U+0009`) character.\\n\\nSyntax: | \\n\\nStatus: standard\\n\\nSupported browsers: FF4,S6.1,C21,O15\"\n }\n },\n {\n \"name\": \"text-align\",\n \"references\": [\n {\n \"name\": \"SVG Spec\",\n \"url\": \"https://www.w3.org/TR/css-text-3/#text-align-property\"\n }\n ],\n \"description\": {\n \"kind\": \"markdown\",\n \"value\": \"The **`text-align`** CSS property sets the horizontal alignment of a block element or table-cell box. This means it works like [`vertical-align`](https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align \\\"The vertical-align CSS property sets vertical alignment of an inline or table-cell box.\\\") but in the horizontal direction.\\n\\nSyntax: start | end | left | right | center | justify | match-parent\\n\\nStatus: standard\"\n }\n },\n {\n \"name\": \"text-align-last\",\n \"references\": [\n {\n \"name\": \"SVG Spec\",\n \"url\": \"https://www.w3.org/TR/css-text-3/#text-align-last-property\"\n }\n ],\n \"description\": {\n \"kind\": \"markdown\",\n \"value\": \"The **`text-align-last`** CSS property sets how the last line of a block or a line, right before a forced line break, is aligned.\\n\\nSyntax: auto | start | end | left | right | center | justify\\n\\nStatus: standard\\n\\nSupported browsers: E12,FF49,C47,IE,O\"\n }\n },\n {\n \"name\": \"text-indent\",\n \"references\": [\n {\n \"name\": \"SVG Spec\",\n \"url\": \"https://www.w3.org/TR/css-text-3/#text-indent-property\"\n }\n ],\n \"description\": {\n \"kind\": \"markdown\",\n \"value\": \"The **`text-indent`** CSS property sets the length of empty space (indentation) that is put before lines of text in a block.\\n\\nSyntax: && hanging? && each-line?\\n\\nStatus: standard\"\n }\n },\n {\n \"name\": \"text-justify\",\n \"references\": [\n {\n \"name\": \"SVG Spec\",\n \"url\": \"https://www.w3.org/TR/css-text-3/#text-justify-property\"\n }\n ],\n \"description\": {\n \"kind\": \"markdown\",\n \"value\": \"The **`text-justify`** CSS property sets what type of justification should be applied to text when [`text-align`](https://developer.mozilla.org/en-US/docs/Web/CSS/text-align \\\"The text-align CSS property sets the horizontal alignment of a block element or table-cell box. This means it works like vertical-align but in the horizontal direction.\\\")`: justify;` is set on an element.\\n\\nSyntax: auto | inter-character | inter-word | none\\n\\nStatus: standard\\n\\nSupported browsers: E14,FF55,C,IE11,O\"\n }\n },\n {\n \"name\": \"text-transform\",\n \"references\": [\n {\n \"name\": \"SVG Spec\",\n \"url\": \"https://www.w3.org/TR/css-text-3/#text-transform-property\"\n }\n ],\n \"description\": {\n \"kind\": \"markdown\",\n \"value\": \"The **`text-transform`** CSS property specifies how to capitalize an element's text. It can be used to make text appear in all-uppercase or all-lowercase, or with each word capitalized. It also can help improve legibility for ruby.\\n\\nSyntax: none | capitalize | uppercase | lowercase | full-width\\n\\nStatus: standard\"\n }\n },\n {\n \"name\": \"white-space\",\n \"references\": [\n {\n \"name\": \"SVG Spec\",\n \"url\": \"https://www.w3.org/TR/css-text-3/#white-space-property\"\n }\n ],\n \"description\": {\n \"kind\": \"markdown\",\n \"value\": \"The **`white-space`** CSS property sets how [white space](https://developer.mozilla.org/en-US/docs/Glossary/whitespace \\\"white space: Whitespace is a set of characters used to show horizontal or vertical spaces between other characters. They are often used to separate tokens in HTML, CSS, JavaScript, and other computer languages.\\\") inside an element is handled.\\n\\nSyntax: normal | pre | nowrap | pre-wrap | pre-line\\n\\nStatus: standard\"\n }\n },\n {\n \"name\": \"word-break\",\n \"references\": [\n {\n \"name\": \"SVG Spec\",\n \"url\": \"https://www.w3.org/TR/css-text-3/#word-break-property\"\n }\n ],\n \"description\": {\n \"kind\": \"markdown\",\n \"value\": \"The **`word-break`** [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets whether line breaks appear wherever the text would otherwise overflow its content box.\\n\\nSyntax: normal | break-all | keep-all | break-word\\n\\nStatus: standard\"\n }\n },\n {\n \"name\": \"word-spacing\",\n \"references\": [\n {\n \"name\": \"SVG Spec\",\n \"url\": \"https://www.w3.org/TR/css-text-3/#word-spacing-property\"\n }\n ],\n \"description\": {\n \"kind\": \"markdown\",\n \"value\": \"The **`word-spacing`** attribute specifies spacing behavior between words.\\n\\nSyntax: normal | \\n\\nStatus: standard\"\n }\n },\n {\n \"name\": \"word-wrap\",\n \"references\": [\n {\n \"name\": \"SVG Spec\",\n \"url\": \"https://www.w3.org/TR/css-text-3/#overflow-wrap-property\"\n }\n ],\n \"description\": {\n \"kind\": \"markdown\",\n \"value\": \"\\n\\nSyntax: normal | break-word\\n\\nStatus: standard\"\n }\n },\n {\n \"name\": \"vertical-align\",\n \"references\": [\n {\n \"name\": \"SVG Spec\",\n \"url\": \"https://drafts.csswg.org/css-inline/#transverse-alignment\"\n }\n ],\n \"description\": {\n \"kind\": \"markdown\",\n \"value\": \"The **`vertical-align`** [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets vertical alignment of an inline or table-cell box.\\n\\nSyntax: baseline | sub | super | text-top | text-bottom | middle | top | bottom | | \\n\\nStatus: standard\"\n }\n },\n {\n \"name\": \"direction\",\n \"references\": [\n {\n \"name\": \"SVG Spec\",\n \"url\": \"https://www.w3.org/TR/SVG/text.html#DirectionProperty\"\n }\n ],\n \"description\": {\n \"kind\": \"markdown\",\n \"value\": \"The **`direction`** attribute specifies the inline-base direction of a [``](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/text \\\"The SVG element draws a graphics element consisting of text. It's possible to apply a gradient, pattern, clipping path, mask, or filter to , like any other SVG graphics element.\\\") or [``](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/tspan \\\"The SVG element define a subtext within a element or another element. It allows to adjust the style and/or position of that subtext as needed.\\\") element. It defines the start and end points of a line of text as used by the `[text-anchor](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/text-anchor)` and `[inline-size](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/inline-size)` properties. It also may affect the direction in which characters are positioned if the `[unicode-bidi](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/unicode-bidi)` property's value is either `embed` or `bidi-override`.\\n\\nSyntax: ltr | rtl\\n\\nStatus: standard\"\n }\n },\n {\n \"name\": \"unicode-bidi\",\n \"references\": [\n {\n \"name\": \"SVG Spec\",\n \"url\": \"https://www.w3.org/TR/css-writing-modes-3/#unicode-bidi\"\n }\n ],\n \"description\": {\n \"kind\": \"markdown\",\n \"value\": \"The **`unicode-bidi`** [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property, together with the [`direction`](https://developer.mozilla.org/en-US/docs/Web/CSS/direction \\\"The direction CSS property sets the direction of text, table columns, and horizontal overflow.\\\") property, determines how bidirectional text in a document is handled. For example, if a block of content contains both left-to-right and right-to-left text, the user-agent uses a complex Unicode algorithm to decide how to display the text. The `unicode-bidi` property overrides this algorithm and allows the developer to control the text embedding.\\n\\nSyntax: normal | embed | isolate | bidi-override | isolate-override | plaintext\\n\\nStatus: standard\"\n }\n },\n {\n \"name\": \"writing-mode\",\n \"references\": [\n {\n \"name\": \"SVG Spec\",\n \"url\": \"https://www.w3.org/TR/SVG/text.html#WritingModeProperty\"\n }\n ],\n \"description\": {\n \"kind\": \"markdown\",\n \"value\": \"The **`writing-mode`** attribute specifies whether the initial inline-progression-direction for a [``](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/text \\\"The SVG element draws a graphics element consisting of text. It's possible to apply a gradient, pattern, clipping path, mask, or filter to , like any other SVG graphics element.\\\") element shall be left-to-right, right-to-left, or top-to-bottom. The `writing-mode` attribute applies only to [``](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/text \\\"The SVG element draws a graphics element consisting of text. It's possible to apply a gradient, pattern, clipping path, mask, or filter to , like any other SVG graphics element.\\\") elements; the attribute is ignored for [``](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/tspan \\\"The SVG element define a subtext within a element or another element. It allows to adjust the style and/or position of that subtext as needed.\\\"), [``](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/tref \\\"The textual content for a SVG element can be either character data directly embedded within the element or the character data content of a referenced element, where the referencing is specified with a element.\\\"), [``](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/altGlyph \\\"The SVG element allows sophisticated selection of the glyphs used to render its child character data.\\\") and [``](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/textPath \\\"To render text along the shape of a , enclose the text in a element that has an href attribute with a reference to the element.\\\") sub-elements. (Note that the inline-progression-direction can change within a [``](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/text \\\"The SVG element draws a graphics element consisting of text. It's possible to apply a gradient, pattern, clipping path, mask, or filter to , like any other SVG graphics element.\\\") element due to the Unicode bidirectional algorithm and properties `[direction](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/direction)` and `[unicode-bidi](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/unicode-bidi)`.\\n\\nSyntax: horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr\\n\\nStatus: standard\"\n }\n },\n {\n \"name\": \"text-orientation\",\n \"references\": [\n {\n \"name\": \"SVG Spec\",\n \"url\": \"https://www.w3.org/TR/css3-writing-modes/#text-orientation\"\n }\n ],\n \"description\": {\n \"kind\": \"markdown\",\n \"value\": \"The **`text-orientation`** [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets the orientation of the text characters in a line. It only affects text in vertical mode (when [`writing-mode`](https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode \\\"The writing-mode CSS property sets whether lines of text are laid out horizontally or vertically, as well as the direction in which blocks progress. When set for an entire document, it should be set on the root element (html element for HTML documents).\\\") is not `horizontal-tb`).\\n\\nSyntax: mixed | upright | sideways\\n\\nStatus: standard\\n\\nSupported browsers: FF41,C48,O\"\n }\n },\n {\n \"name\": \"text-combine-upright\",\n \"references\": [\n {\n \"name\": \"SVG Spec\",\n \"url\": \"https://www.w3.org/TR/css-writing-modes-3/#text-combine-upright\"\n }\n ],\n \"description\": {\n \"kind\": \"markdown\",\n \"value\": \"The **`text-combine-upright`** [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets the combination of characters into the space of a single character.\\n\\nSyntax: none | all | [ digits ? ]\\n\\nStatus: standard\"\n }\n },\n {\n \"name\": \"text-decoration\",\n \"references\": [\n {\n \"name\": \"SVG Spec\",\n \"url\": \"https://www.w3.org/TR/SVG/text.html#TextDecorationProperties\"\n }\n ],\n \"description\": {\n \"kind\": \"markdown\",\n \"value\": \"The **`text-decoration`** attribute defines whether text is decorated with an underline, overline and/or strike-through.\\n\\nSyntax: <'text-decoration-line'> || <'text-decoration-style'> || <'text-decoration-color'>\\n\\nStatus: standard\"\n }\n },\n {\n \"name\": \"text-decoration-line\",\n \"references\": [\n {\n \"name\": \"SVG Spec\",\n \"url\": \"https://www.w3.org/TR/SVG/text.html#TextDecorationProperties\"\n }\n ],\n \"description\": {\n \"kind\": \"markdown\",\n \"value\": \"The **`text-decoration-line`** [CSS](https://developer.mozilla.org/en-US/docs/CSS) property sets the kind of decoration that is used on text in an element, such as an underline or overline.\\n\\nSyntax: none | [ underline || overline || line-through || blink ]\\n\\nStatus: standard\\n\\nSupported browsers: FF36,S,C,O\"\n }\n },\n {\n \"name\": \"text-decoration-style\",\n \"references\": [\n {\n \"name\": \"SVG Spec\",\n \"url\": \"https://www.w3.org/TR/SVG/text.html#TextDecorationProperties\"\n }\n ],\n \"description\": {\n \"kind\": \"markdown\",\n \"value\": \"The **`text-decoration-style`** [CSS](https://developer.mozilla.org/en-US/docs/CSS) property sets the style of the lines specified by [`text-decoration-line`](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-line \\\"The text-decoration-line CSS property sets the kind of decoration that is used on text in an element, such as an underline or overline.\\\"). The style applies to all lines that are set with `text-decoration-line`.\\n\\nSyntax: solid | double | dotted | dashed | wavy\\n\\nStatus: standard\\n\\nSupported browsers: FF36,S,C57,O44\"\n }\n },\n {\n \"name\": \"text-decoration-color\",\n \"references\": [\n {\n \"name\": \"SVG Spec\",\n \"url\": \"https://www.w3.org/TR/SVG/text.html#TextDecorationProperties\"\n }\n ],\n \"description\": {\n \"kind\": \"markdown\",\n \"value\": \"The **`text-decoration-color`** [CSS](https://developer.mozilla.org/en-US/docs/CSS) property sets the color of decorations added to text by [`text-decoration-line`](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-line \\\"The text-decoration-line CSS property sets the kind of decoration that is used on text in an element, such as an underline or overline.\\\").\\n\\nSyntax: \\n\\nStatus: standard\\n\\nSupported browsers: FF36,S,C57,O44\"\n }\n },\n {\n \"name\": \"object-fit\",\n \"references\": [\n {\n \"name\": \"SVG Spec\",\n \"url\": \"https://www.w3.org/TR/css3-images/#the-object-fit\"\n }\n ],\n \"description\": {\n \"kind\": \"markdown\",\n \"value\": \"The **`object-fit`** [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets how the content of a [replaced element](https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element), such as an [``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img \\\"The HTML element embeds an image into the document. It is a replaced element.\\\") or [`