Showing preview only (3,703K chars total). Download the full file or copy to clipboard to get everything.
Repository: microsoft/vscode-custom-data
Branch: main
Commit: 574298a8b3aa
Files: 68
Total size: 3.5 MB
Directory structure:
gitextract_hh2g8fv3/
├── .github/
│ └── CONTRIBUTING.md
├── .gitignore
├── .vscode/
│ ├── launch.json
│ └── settings.json
├── CODE_OF_CONDUCT.md
├── LICENSE
├── README.md
├── SECURITY.md
├── build/
│ └── pipeline.yml
├── samples/
│ ├── helloworld/
│ │ ├── .vscode/
│ │ │ └── settings.json
│ │ ├── README.md
│ │ ├── css.css-data.json
│ │ ├── html.html-data.json
│ │ ├── test.css
│ │ └── test.html
│ ├── svg/
│ │ ├── .gitignore
│ │ ├── .vscode/
│ │ │ ├── launch.json
│ │ │ ├── settings.json
│ │ │ └── tasks.json
│ │ ├── README.md
│ │ ├── build/
│ │ │ ├── index.ts
│ │ │ ├── mdn-bcd.ts
│ │ │ ├── mdn-data.ts
│ │ │ ├── mdn-description.ts
│ │ │ ├── postprocess.ts
│ │ │ ├── svg-spec.ts
│ │ │ └── util.ts
│ │ ├── data/
│ │ │ ├── svg.css-data.json
│ │ │ └── svg.html-data.json
│ │ ├── package.json
│ │ ├── raw-data/
│ │ │ ├── definitions.xml
│ │ │ ├── svg-css-contribution.json
│ │ │ └── svg-html-contribution.json
│ │ ├── test.css
│ │ ├── test.html
│ │ └── tsconfig.json
│ └── webcomponents/
│ ├── .vscode/
│ │ └── settings.json
│ ├── README.md
│ ├── index.html
│ └── src/
│ ├── components/
│ │ └── my-component/
│ │ ├── docs.md
│ │ └── main.js
│ └── web-components.html-data.json
└── web-data/
├── CHANGELOG.md
├── LICENSE.md
├── README.md
├── css/
│ ├── add-atrule-descriptors.mjs
│ ├── chromestatus/
│ │ ├── applyRelevance.mjs
│ │ ├── attributeRelevance.mjs
│ │ └── updateRelevance.mjs
│ ├── css-schema.json
│ ├── generateData.mjs
│ ├── mdn/
│ │ ├── mdn-browser-compat-data-importer.mjs
│ │ ├── mdn-data-importer.mjs
│ │ ├── mdn-data-selector-importer.mjs
│ │ └── mdn-documentation.mjs
│ └── utils.mjs
├── data/
│ ├── browsers.css-data.json
│ └── browsers.html-data.json
├── html/
│ ├── ariaData.json
│ ├── ariaSpec.json
│ ├── generateData.mjs
│ ├── htmlEvents.json
│ ├── htmlGlobalAttributes.json
│ ├── htmlTags.json
│ ├── mdnTagDescriptions.json
│ ├── oldEvents.json
│ └── valueSets.json
└── package.json
================================================
FILE CONTENTS
================================================
================================================
FILE: .github/CONTRIBUTING.md
================================================
# Contributing to VS Code Custom Data
## I want to update a specific HTML/CSS entity
If you go to `web-data`, the `generate-data` script will regenerate `data/browsers.html-data.json` and `data/browsers.css-data.json`.
Some 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).
================================================
FILE: .gitignore
================================================
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Runtime data
pids
*.pid
*.seed
*.pid.lock
# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov
# Coverage directory used by tools like istanbul
coverage
# nyc test coverage
.nyc_output
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
.grunt
# Bower dependency directory (https://bower.io/)
bower_components
# node-waf configuration
.lock-wscript
# Compiled binary addons (https://nodejs.org/api/addons.html)
build/Release
# Dependency directories
node_modules/
jspm_packages/
# TypeScript v1 declaration files
typings/
# Optional npm cache directory
.npm
# Optional eslint cache
.eslintcache
# Optional REPL history
.node_repl_history
# Output of 'npm pack'
*.tgz
# Yarn Integrity file
.yarn-integrity
# dotenv environment variables file
.env
# next.js build output
.next
================================================
FILE: .vscode/launch.json
================================================
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "pwa-node",
"request": "launch",
"name": "Launch Program",
"skipFiles": [
"<node_internals>/**"
],
"program": "${workspaceFolder}/web-data/css/generateData.mjs"
}
]
}
================================================
FILE: .vscode/settings.json
================================================
{
"git.branchProtection": [
"main"
],
"git.branchProtectionPrompt": "alwaysCommitToNewBranch",
"git.branchRandomName.enable": true,
"githubPullRequests.assignCreated": "${user}",
"githubPullRequests.defaultMergeMethod": "squash"
}
================================================
FILE: CODE_OF_CONDUCT.md
================================================
# Microsoft Open Source Code of Conduct
This project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/).
Resources:
- [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/)
- [Microsoft Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/)
- Contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with questions or concerns
================================================
FILE: LICENSE
================================================
MIT License
Copyright (c) Microsoft Corporation.
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE
================================================
FILE: README.md
================================================
<p>
<h2 align="center">VS Code Custom Data</h2>
Documentation, sample and data for using VS Code's HTML/CSS custom data format.
</p>
## Synopsis
VS 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.
## Usage
There are two primary use cases:
1. 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.
2. 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.
## Explanation
Take this HTML auto-completion example:
`<|`
- `vscode-html-languageservice` determines that it should provide a list of tag names, such as `div`, `span`, `p`.
- By default, VS Code provides data extracted from HTML spec to `vscode-html-languageservice`, so `<|` completes all HTML tags described in the HTML spec.
- The `html.customData` setting and `contributes.html.customData` allows you to extend this list to include your own definition of HTML tags.
On 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.
<div align="center">
<img alt="CSS completion" src="./media/css-completion.png" width="680px">
</div>
<p></p>
On 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:
- WebComponents-based frameworks can statically analyze their components and emit a JSON file following the custom data schema to get language support.
- 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.
<div align="center">
<img alt="WebComponents completion" src="./samples/webcomponents/demo.gif" width="680px">
</div>
## Documentation
- [HTML Custom Data](https://github.com/microsoft/vscode-html-languageservice/blob/master/docs/customData.md)
- [CSS Custom Data](https://github.com/microsoft/vscode-css-languageservice/blob/master/docs/customData.md)
## Schemas and Versioning
- [Latest HTML Schema, V1.1](https://github.com/microsoft/vscode-html-languageservice/blob/master/docs/customData.schema.json)
- [Latest CSS Schema, V1.1](https://github.com/microsoft/vscode-CSS-languageservice/blob/master/docs/customData.schema.json)
### Versioning
- Schemas are versioned in the format of `<Major>.<Minor>`.
- `Minor` changes are backwards compatible. Custom data that satisfies `V1.X` spec would be valid according to `V1.0` spec.
- `Major` changes introduce breaking changes. Custom data that satisfies `V2.X` spec would likely be invalid according to `V1.0` spec.
## Samples
- [`samples/helloworld`](./samples/helloworld): Open this sample in VS Code and start playing with custom data.
- [`samples/svg`](./samples/svg): A real-world sample that loads SVG-related HTML/CSS entities in VS Code.
- [`samples/webcomponents`](./samples/webcomponents): Use custom data to get web component editor support in HTML.
- [`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.
## Web Data
`/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.
## Updating Web Data
- Run `npm run update-sources`, which updates `@mdn/browser-compat-data`, `mdn-data` and `attributeRelevance.js`
- After all updates are done, run `npm run generate-data`
- 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
- Finally, commit and publish the data to [@vscode/web-custom-data](https://www.npmjs.com/package/@vscode/web-custom-data) on NPM.
## Contributing
This project welcomes contributions and suggestions. Most contributions require you to agree to a
Contributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us
the rights to use your contribution. For details, visit https://cla.opensource.microsoft.com.
When you submit a pull request, a CLA bot will automatically determine whether you need to provide
a CLA and decorate the PR appropriately (e.g., status check, comment). Simply follow the instructions
provided by the bot. You will only need to do this once across all repos using our CLA.
This project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/).
For more information see the [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/) or
contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with any additional questions or comments.
================================================
FILE: SECURITY.md
================================================
<!-- BEGIN MICROSOFT SECURITY.MD V0.0.1 BLOCK -->
## Security
Microsoft 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/).
If 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.
## Reporting Security Issues
**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).
You 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).
Please 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:
* Type of issue (e.g. buffer overflow, SQL injection, cross-site scripting, etc.)
* Full paths of source file(s) related to the manifestation of the issue
* The location of the affected source code (tag/branch/commit or direct URL)
* Any special configuration required to reproduce the issue
* Step-by-step instructions to reproduce the issue
* Proof-of-concept or exploit code (if possible)
* Impact of the issue, including how an attacker might exploit the issue
This information will help us triage your report more quickly.
## Preferred Languages
We prefer all communications to be in English.
## Policy
Microsoft follows the principle of [Coordinated Vulnerability Disclosure](https://www.microsoft.com/en-us/msrc/cvd).
<!-- END MICROSOFT SECURITY.MD BLOCK -->
================================================
FILE: build/pipeline.yml
================================================
name: $(Date:yyyyMMdd)$(Rev:.r)
trigger:
batch: true
branches:
include:
- main
pr: none
resources:
repositories:
- repository: templates
type: github
name: microsoft/vscode-engineering
ref: main
endpoint: Monaco
parameters:
- name: publishPackage
displayName: 🚀 Publish web-custom-data
type: boolean
default: false
extends:
template: azure-pipelines/npm-package/pipeline.yml@templates
parameters:
npmPackages:
- name: web-custom-data
testPlatforms:
- name: Linux
nodeVersions:
- 20.x
publishPackage: ${{ parameters.publishPackage }}
publishRequiresApproval: false
workingDirectory: $(Build.SourcesDirectory)/web-data
================================================
FILE: samples/helloworld/.vscode/settings.json
================================================
{
"html.customData": ["./html.html-data.json"],
"css.customData": ["./css.css-data.json"]
}
================================================
FILE: samples/helloworld/README.md
================================================
# Custom Data for HTML/CSS support in VS Code
This demonstrates Custom HTML/CSS data support for VS Code.
See https://code.visualstudio.com/updates/v1_31 for details.
## Usage
- Open this folder in VS Code 1.31+
- Try completion/hover in the test.html and test.css
- In `test.html`, try typing `<my-` to complete `<my-button>` HTML tag.
- In `test.css` try typing `my-` inside a selector to complete `my-size` CSS property.
- Edit data in html.json and css.json and reload VS Code to reload the custom data
## Docs
- [HTML Custom Data](https://github.com/Microsoft/vscode-html-languageservice/blob/master/docs/customData.md)
- [CSS Custom Data](https://github.com/Microsoft/vscode-css-languageservice/blob/master/docs/customData.md)
================================================
FILE: samples/helloworld/css.css-data.json
================================================
{
"version": 1.1,
"properties": [{
"name": "my-size",
"description": "Compiles down to `width` and `height`. See details at https://github.com/postcss/postcss-size",
"references": [
{
"name": "GitHub",
"url": "https://github.com/postcss/postcss-size"
}
]
}],
"pseudoClasses": [{
"name": ":my-link",
"description": ":any-link pseudo class. See details at https://preset-env.cssdb.org/features#any-link-pseudo-class"
}]
}
================================================
FILE: samples/helloworld/html.html-data.json
================================================
{
"version": 1.1,
"tags": [
{
"name": "my-button",
"description": "My button. You should use it as in `<my-button type='alert'></mybutton>`.",
"attributes": [
{
"name": "type",
"description": "My button type",
"values": [{ "name": "alert" }]
}
],
"references": [
{
"name": "Bootstrap buttons",
"url": "https://getbootstrap.com/docs/4.0/components/buttons/"
}
]
}
]
}
================================================
FILE: samples/helloworld/test.css
================================================
:my-link {
my-size: 4px;
}
================================================
FILE: samples/helloworld/test.html
================================================
<my-button type="alert"></my-button>
================================================
FILE: samples/svg/.gitignore
================================================
dist
node_modules
.vscode-test/
*.vsix
================================================
FILE: samples/svg/.vscode/launch.json
================================================
{
"version": "0.2.0",
"configurations": [{
"name": "Run Extension",
"type": "extensionHost",
"request": "launch",
"runtimeExecutable": "${execPath}",
"args": [
"--extensionDevelopmentPath=${workspaceFolder}"
],
"outFiles": [
"${workspaceFolder}/out/**/*.js"
]
},
{
"name": "Update Data",
"program": "${workspaceFolder}/dist/index.js",
"request": "launch",
"skipFiles": [
"<node_internals>/**"
],
"type": "pwa-node",
"preLaunchTask": "npm: compile"
}
]
}
================================================
FILE: samples/svg/.vscode/settings.json
================================================
{
"html.customData": ["./data/svg.html-data.json"],
"css.customData": ["./data/svg.css-data.json"],
}
================================================
FILE: samples/svg/.vscode/tasks.json
================================================
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
{
"version": "2.0.0",
"tasks": [
{
"type": "npm",
"script": "watch",
"problemMatcher": "$tsc-watch",
"isBackground": true,
"presentation": {
"reveal": "never"
},
"group": {
"kind": "build",
"isDefault": true
}
}
]
}
================================================
FILE: samples/svg/README.md
================================================
# SVG Sample
SVG support in HTML/CSS files using plain JSON files.
- HTML support: https://github.com/Microsoft/vscode/issues/62976
- CSS support: https://github.com/Microsoft/vscode/issues/64164
The data are pulled from:
- SVG 2 [spec](https://www.w3.org/TR/SVG2/) and [GitHub](https://github.com/w3c/svgwg)
- [MDN SVG reference](https://developer.mozilla.org/en-US/docs/Web/SVG)
- [mdn/browser-compat-data](https://github.com/mdn/browser-compat-data)
## Usage
- Open this folder in VS Code 1.31+
- 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.
- 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).
## Docs
- [HTML Custom Data](https://github.com/Microsoft/vscode-html-languageservice/blob/master/docs/customData.md)
- [CSS Custom Data](https://github.com/Microsoft/vscode-css-languageservice/blob/master/docs/customData.md)
## License
MIT
================================================
FILE: samples/svg/build/index.ts
================================================
import { getSVGSpec, HTMLElement, HTMLAttribute, CSSProperty } from './svg-spec'
import { getMDNMDDescription } from './mdn-description'
import { sleep } from './util'
import * as path from 'path'
import * as fs from 'fs'
import { addCSSMDNData } from './mdn-data'
/**
* Get static CSS data from
* - Spec
* - mdn-data and mdn-browser-compat-data
*/
function getStaticHTMLData() {
const { elements, globalAttributes } = getSVGSpec()
return {
elements,
globalAttributes
}
}
/**
* Attach HTML descriptions from MDN to input properties
*/
async function attachAsyncHTMLDataFromMDN(
elements: HTMLElement[],
globalAttributes: HTMLAttribute[]
): Promise<boolean> {
// Collect all attribute
const allAttributes = globalAttributes
elements.forEach(el => {
el.attributes.forEach(a => {
if (!allAttributes.find(ta => ta.name === a.name)) {
allAttributes.push(a)
}
})
})
for (let e of elements) {
let desc
try {
desc = await getMDNMDDescription(e.name, 'tag')
} catch (err) {
return false
}
if (desc) {
e.description = desc
await sleep(1000)
console.log(`Done with ${e.name} tag`)
}
}
for (let a of allAttributes) {
let desc
try {
desc = await getMDNMDDescription(a.name, 'attribute')
} catch (err) {
return false
}
if (desc) {
a.description = desc
await sleep(1000)
console.log(`Done with ${a.name} attribute`)
}
}
return true
}
async function generateHTMLData() {
const { elements, globalAttributes } = getStaticHTMLData()
const getMdnDataSuccess = attachAsyncHTMLDataFromMDN(elements, globalAttributes)
if (!getMdnDataSuccess) {
console.log('Failed to get data from MDN')
return
}
const htmlOut = {
version: 1.1,
tags: elements,
globalAttributes
}
console.log('Writing svg-html-contribution.json')
fs.writeFileSync(path.resolve(__dirname, '../raw-data/svg-html-contribution.json'), JSON.stringify(htmlOut, null, 2))
console.log('Done writing svg-html-contribution.json')
}
/**
* Get static CSS data from
* - Spec
* - mdn-data and mdn-browser-compat-data
*/
function getStaticCSSData(): CSSProperty[] {
const { cssSpecProperties } = getSVGSpec()
return cssSpecProperties.map(addCSSMDNData)
}
/**
* Attach CSS descriptions from MDN to input properties
*/
async function attachAsyncCSSDataFromMDN(cssProperties: CSSProperty[]): Promise<boolean> {
for (let p of cssProperties) {
let desc
try {
desc = await getMDNMDDescription(p.name, 'attribute')
} catch (err) {
return false
}
if (desc) {
p.description = desc
await sleep(1000)
}
console.log(`Done with ${p.name} property`)
}
return true
}
async function generateCSSData() {
const cssProperties = getStaticCSSData()
const getMdnDataSuccess = await attachAsyncCSSDataFromMDN(cssProperties)
if (!getMdnDataSuccess) {
console.log('Failed to get data from MDN')
return
}
const cssOut = {
version: 1.1,
properties: cssProperties
}
console.log('Writing svg-css-contribution.json')
fs.writeFileSync(path.resolve(__dirname, '../raw-data/svg-css-contribution.json'), JSON.stringify(cssOut, null, 2))
console.log('Done writing svg-css-contribution.json')
}
async function getHTMLData() {
const { elements, globalAttributes } = getSVGSpec()
for (let e of elements) {
const desc = await getMDNMDDescription(e.name, 'tag')
if (desc) {
e.description = desc
await sleep(1000)
console.log(`Done with ${e.name} tag`)
}
}
const allAttributes = globalAttributes
elements.forEach(el => {
el.attributes.forEach(a => {
if (!allAttributes.find(ta => ta.name === a.name)) {
allAttributes.push(a)
}
})
})
for (let a of allAttributes) {
const desc = await getMDNMDDescription(a.name, 'attribute')
if (desc) {
a.description = desc
await sleep(1000)
console.log(`Done with ${a.name} attribute`)
}
}
const htmlOut = {
tags: elements,
globalAttributes
}
fs.writeFileSync(path.resolve(__dirname, '../raw-data/svg-html-contribution.json'), JSON.stringify(htmlOut, null, 2))
}
;(async () => {
await generateHTMLData()
await generateCSSData()
})()
================================================
FILE: samples/svg/build/mdn-bcd.ts
================================================
const bcd = require('@mdn/browser-compat-data')
import * as fs from 'fs'
import * as path from 'path'
import { CSSProperty } from './svg-spec';
const el = bcd.svg.elements as any
const at = bcd.svg.attributes as any
function htmlExport() {
const tags = []
for (let e in el) {
tags.push({
label: e,
description: `svg tag: ${e}`,
attributes: []
})
}
const serializedTags = JSON.stringify({ tags }, null, 2)
fs.writeFileSync(path.resolve(__dirname, '../data/svg-tags.json'), serializedTags)
const attributes = []
for (let category in at) {
for (let a in at[category]) {
attributes.push({
label: a,
description: `svg attribute: ${a}`
})
}
}
const serializedAttributes = JSON.stringify({ attributes }, null, 2)
fs.writeFileSync(path.resolve(__dirname, '../data/svg-attributes.json'), serializedAttributes)
}
function cssExport() {
const properties = []
for (let category in at) {
for (let a in at[category]) {
properties.push({
name: a,
desc: `svg attribute: ${a}`
})
}
}
const serializedProperties = JSON.stringify({ properties }, null, 2)
fs.writeFileSync(path.resolve(__dirname, '../data/svg-properties.json'), serializedProperties)
}
// htmlExport()
// cssExport()
/**
* In
*/
function addMDNData(properties: Partial<CSSProperty>[]) {
}
================================================
FILE: samples/svg/build/mdn-data.ts
================================================
const mdnData = require('mdn-data');
const bcdData = require('@mdn/browser-compat-data')
import { CSSProperty, CSSSpecProperty } from './svg-spec';
import { toCompatString, isSupportedInAllBrowsers } from './util';
const properties = mdnData.css.properties
const bcdProperties = bcdData.css.properties
export function addCSSMDNData(specProperty: CSSSpecProperty): CSSProperty {
const property: CSSProperty = { ...specProperty }
if (getPropertyStatus(specProperty.name)) {
property.status = getPropertyStatus(specProperty.name)
}
if (getPropertySyntax(specProperty.name)) {
property.syntax = getPropertySyntax(specProperty.name)
}
if (getPropertyBrowsers(specProperty.name)) {
property.browsers = getPropertyBrowsers(specProperty.name)
}
return property
}
function getPropertyStatus(name: string) {
if (properties[name]) {
let status = properties[name].status;
let mdnCompatEntry = bcdProperties[name];
if (!mdnCompatEntry) {
for (const contextName in mdnCompatEntry) {
if (mdnCompatEntry[contextName].__compat) {
mdnCompatEntry = mdnCompatEntry[contextName].__compat;
break;
}
}
}
const compatStatus = mdnCompatEntry?.status;
if (compatStatus) {
if (compatStatus.experimental) {
status = 'experimental';
} else if (compatStatus.deprecated) {
status = 'obsolete';
} else if (compatStatus.standard_track) {
status = 'standard';
} else {
status = 'nonstandard';
}
}
return status;
}
}
function getPropertySyntax(name: string) {
if (properties[name]) {
return properties[name].syntax
}
}
function getPropertyBrowsers(name: string) {
if (bcdProperties[name]) {
if (!isSupportedInAllBrowsers(bcdProperties[name])) {
return toCompatString(bcdProperties[name])
}
}
}
================================================
FILE: samples/svg/build/mdn-description.ts
================================================
export type PropertyType = 'tag' | 'attribute'
export async function getMDNMDDescription(name: string, type: PropertyType) {
// todo; get a desscription, e.g. from https://github.com/mdn/content/edit/main/files/en-us/web/svg/attribute/{name}/index.md
return null;
}
================================================
FILE: samples/svg/build/postprocess.ts
================================================
import * as fs from 'fs'
import * as path from 'path'
const htmlData = require(path.resolve(__dirname, '../raw-data/svg-html-contribution.json'))
const cssData = require(path.resolve(__dirname, '../raw-data/svg-css-contribution.json'))
function transform(entry : any) {
const result = {
kind: 'markdown',
value: ''
}
if (entry.description) {
result.value += entry.description
}
if (entry.syntax) {
result.value += `\n\nSyntax: ${entry.syntax}`
delete entry.syntax
}
if (entry.status) {
result.value += `\n\nStatus: ${entry.status}`
delete entry.status
}
if (entry.browsers) {
result.value += `\n\nSupported browsers: ${entry.browsers.join(',')}`
delete entry.browsers
}
console.log(result.value)
entry.description = result
}
cssData.properties.forEach(transform)
// fs.writeFileSync(path.resolve(__dirname, '../data/svg.html-data.json'), JSON.stringify(htmlData, null, 2));
fs.writeFileSync(path.resolve(__dirname, '../data/svg.css-data.json'), JSON.stringify(cssData, null, 2));
console.log('Done')
================================================
FILE: samples/svg/build/svg-spec.ts
================================================
import * as path from 'path'
import * as fs from 'fs'
const DEFINITION_PATH = path.resolve(__dirname, '../raw-data/definitions.xml')
import * as cheerio from 'cheerio'
interface Reference {
name: string
url: string
}
export interface HTMLElement {
name: string
description?: string
attributes: HTMLAttribute[]
attributeCategories: string[]
references?: Reference[]
}
export interface HTMLAttribute {
name: string
description?: string
references?: Reference[]
}
interface HTMLAttributeCategory {
name: string
attributes: HTMLAttribute[]
references?: Reference[]
}
export interface CSSProperty {
name: string
description?: string
browsers?: string[]
status?: string
syntax?: string
values?: CSSPropertyValue[]
references?: Reference[]
}
export interface CSSSpecProperty {
name: string
references?: Reference[]
}
export interface CSSPropertyValue {
name: string
descriptipn: string
references?: Reference[]
}
const globalAttributes: HTMLAttribute[] = []
const attributeCategories: HTMLAttributeCategory[] = []
const elements: HTMLElement[] = []
const cssSpecProperties: CSSSpecProperty[] = []
function handleHref(href: string) {
return href.startsWith('https://') ? href : 'https://www.w3.org/TR/SVG/' + href
}
function parseStringList(str: string) {
return str.split(',').map(s => s.trim())
}
export function getSVGSpec() {
const src = fs.readFileSync(DEFINITION_PATH, 'utf-8')
const $ = cheerio.load(src, {
xmlMode: true
})
$('definitions > attribute').each((_, e) => {
const x = $(e), name = x.attr('name'), href = x.attr('href');
if (name && href) {
globalAttributes.push({
name,
references: [
{
name: 'SVG Spec',
url: handleHref(href)
}
]
})
}
})
$('attributecategory').each((_, e) => {
const x = $(e), name = x.attr('name'), href = x.attr('href');
if (name && href) {
const attrCate = {
name,
attributes: [] as any,
references: [
{
name: 'SVG Spec',
url: handleHref(href)
}
]
}
$(e)
.find('attribute')
.each((_, e) => {
const x = $(e), name = x.attr('name'), href = x.attr('href');
if (name && href) {
attrCate.attributes.push({
name,
references: [
{
name: 'SVG Spec',
url: handleHref(href)
}
]
})
}
})
attributeCategories.push(attrCate)
}
})
$('element').each((_, e) => {
const x = $(e), name = x.attr('name'), href = x.attr('href'), attributes = x.attr('attributes'), attributecategories = x.attr('attributecategories');
if (name && href) {
const el = {
name,
attributes: [] as HTMLAttribute[],
attributeCategories: [] as string[],
references: [
{
name: 'SVG Spec',
url: handleHref(href)
}
]
}
if (attributes) {
parseStringList(attributes).forEach(s => {
const matchingAttr = globalAttributes.find(a => a.name === s)
if (matchingAttr) {
el.attributes.push(matchingAttr)
}
})
}
$(e)
.find('attribute')
.each((_, ea) => {
const x = $(ea), name = x.attr('name'), href = x.attr('href');
if (name && href) {
el.attributes.push({
name,
references: [
{
name: 'SVG Spec',
url: handleHref(href)
}
]
})
}
})
if (attributecategories) {
parseStringList(attributecategories).forEach(s => {
el.attributeCategories.push(s)
})
}
elements.push(el)
}
})
$('property').each((_, e) => {
const x = $(e), name = x.attr('name'), href = x.attr('href');
if (name && href) {
cssSpecProperties.push({
name,
references: [
{
name: 'SVG Spec',
url: handleHref(href)
}
]
})
}
})
return {
elements,
globalAttributes,
cssSpecProperties
}
}
================================================
FILE: samples/svg/build/util.ts
================================================
export function sleep(ms: number) {
return new Promise<void>(resolve => {
setTimeout(() => {
resolve()
}, ms)
})
}
const browserNames : { [browser: string]: string }= {
E: 'Edge',
FF: 'Firefox',
S: 'Safari',
C: 'Chrome',
IE: 'IE',
O: 'Opera'
}
export function toCompatString(bcdProperty: any) :string[] {
let s : string[] = []
if (bcdProperty.__compat) {
Object.keys(browserNames).forEach((abbrev) => {
const browserName = browserNames[abbrev].toLowerCase()
const browserSupport = bcdProperty.__compat.support[browserName]
if (browserSupport) {
const shortCompatString = supportToShortCompatString(browserSupport, abbrev)
if (shortCompatString) {
s.push(shortCompatString)
}
}
})
} else {
Object.keys(browserNames).forEach((abbrev) => {
const browserName = browserNames[abbrev].toLowerCase()
// Select the most recent versions from all contexts as the short compat string
let shortCompatStringAggregatedFromContexts : string | undefined;
Object.keys(bcdProperty).forEach(contextName => {
const context = bcdProperty[contextName]
if (context.__compat && context.__compat.support[browserName]) {
const browserSupport = context.__compat.support[browserName]
const shortCompatString = supportToShortCompatString(browserSupport, abbrev)
if (!shortCompatStringAggregatedFromContexts || shortCompatString > shortCompatStringAggregatedFromContexts) {
shortCompatStringAggregatedFromContexts = shortCompatString
}
}
})
if (shortCompatStringAggregatedFromContexts) {
s.push(shortCompatStringAggregatedFromContexts)
}
})
}
return s;
}
/**
* Check that a property is supported in all major browsers: Edge, Firefox, Safari, Chrome, IE, Opera
*/
export function isSupportedInAllBrowsers(bcdProperty: any) {
if (bcdProperty.__compat) {
return Object.keys(browserNames).every((abbrev) => {
const browserName = browserNames[abbrev].toLowerCase()
if (bcdProperty.__compat && bcdProperty.__compat.support[browserName]) {
const browserSupport = bcdProperty.__compat.support[browserName]
if (browserSupport) {
return isSupported(browserSupport)
}
}
return false
})
} else {
return Object.keys(browserNames).every((abbrev) => {
const browserName = browserNames[abbrev].toLowerCase()
return Object.keys(bcdProperty).some(contextName => {
const context = bcdProperty[contextName]
if (context.__compat && context.__compat.support[browserName]) {
const browserSupport = context.__compat.support[browserName]
if (browserSupport) {
return isSupported(browserSupport)
}
}
return false
})
})
}
}
/**
* https://github.com/mdn/browser-compat-data/blob/master/schemas/compat-data-schema.md
*
* Convert a support statement to a short compat string.
* For example:
* { "ie": { "version_added": "6.0" } } => "IE6.0"
* {
* "support": {
* "firefox": [
* {
* "version_added": "6"
* },
* {
* "prefix": "-moz-",
* "version_added": "3.5",
* "version_removed": "9"
* }
* ]
* }
* } => "FF6"
*/
function supportToShortCompatString(support: any, browserAbbrev: any) {
let version_added
if (Array.isArray(support) && support[0] && support[0].version_added) {
version_added = support[0].version_added
} else if (support.version_added) {
version_added = support.version_added
}
if (version_added) {
if (typeof(version_added) === 'boolean') {
return browserAbbrev
} else {
return `${browserAbbrev}${version_added}`
}
}
return null
}
function isSupported(support: any) {
let version_added
if (Array.isArray(support) && support[0] && support[0].version_added) {
version_added = support[0].version_added
} else if (support.version_added) {
version_added = support.version_added
}
if (version_added) {
if (typeof(version_added) === 'boolean') {
return version_added
} else if (typeof(version_added) === 'string') {
if (typeof(parseInt(version_added)) === 'number') {
return true
}
}
}
return false
}
================================================
FILE: samples/svg/data/svg.css-data.json
================================================
{
"version": 1.1,
"properties": [
{
"name": "alignment-baseline",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/text.html#AlignmentBaselineProperty"
}
],
"description": {
"kind": "markdown",
"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."
}
},
{
"name": "baseline-shift",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/text.html#BaselineShiftProperty"
}
],
"description": {
"kind": "markdown",
"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."
}
},
{
"name": "color",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/painting.html#ColorProperty"
}
],
"description": {
"kind": "markdown",
"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: <color>\n\nStatus: standard"
}
},
{
"name": "color-interpolation",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/painting.html#ColorInterpolationProperty"
}
],
"description": {
"kind": "markdown",
"value": "The **`color-interpolation`** attribute specifies the color space for gradient interpolations, color animations, and alpha compositing."
}
},
{
"name": "color-rendering",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/painting.html#ColorRenderingProperty"
}
],
"description": {
"kind": "markdown",
"value": "The **`color-rendering`** attribute provides a hint to the SVG user agent about how to optimize its color interpolation and compositing operations."
}
},
{
"name": "cursor",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/css-ui-3/#cursor"
}
],
"description": {
"kind": "markdown",
"value": "The `cursor` attribute specifies the mouse cursor displayed when the mouse pointer is over an element.\n\nSyntax: [ [ <url> [ <x> <y> ]? , ]* [ 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"
}
},
{
"name": "dominant-baseline",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/text.html#DominantBaselineProperty"
}
],
"description": {
"kind": "markdown",
"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."
}
},
{
"name": "fill",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/painting.html#FillProperty"
}
],
"description": {
"kind": "markdown",
"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."
}
},
{
"name": "fill-opacity",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/painting.html#FillOpacityProperty"
}
],
"description": {
"kind": "markdown",
"value": "The **`fill-opacity`** attribute is a presentation attribute defining the opacity of the paint server (_color_, _gradient_, _pattern_, etc) applied to a shape."
}
},
{
"name": "fill-rule",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/painting.html#FillRuleProperty"
}
],
"description": {
"kind": "markdown",
"value": "The **`fill-rule`** attribute is a presentation attribute defining the algorithm to use to determine the _inside_ part of a shape."
}
},
{
"name": "glyph-orientation-horizontal",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/text.html#GlyphOrientationHorizontalProperty"
}
],
"description": {
"kind": "markdown",
"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."
}
},
{
"name": "glyph-orientation-vertical",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/text.html#GlyphOrientationVerticalProperty"
}
],
"description": {
"kind": "markdown",
"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."
}
},
{
"name": "image-rendering",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/painting.html#ImageRenderingProperty"
}
],
"description": {
"kind": "markdown",
"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"
}
},
{
"name": "inline-size",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/text.html#InlineSizeProperty"
}
],
"description": {
"kind": "markdown",
"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"
}
},
{
"name": "marker",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/painting.html#MarkerProperty"
}
],
"description": {
"kind": "markdown",
"value": ""
}
},
{
"name": "marker-end",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/painting.html#MarkerEndProperty"
}
],
"description": {
"kind": "markdown",
"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)."
}
},
{
"name": "marker-mid",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/painting.html#MarkerMidProperty"
}
],
"description": {
"kind": "markdown",
"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)."
}
},
{
"name": "marker-start",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/painting.html#MarkerStartProperty"
}
],
"description": {
"kind": "markdown",
"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)."
}
},
{
"name": "overflow",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/render.html#OverflowAndClipProperties"
}
],
"description": {
"kind": "markdown",
"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"
}
},
{
"name": "paint-order",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/painting.html#PaintOrderProperty"
}
],
"description": {
"kind": "markdown",
"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"
}
},
{
"name": "pointer-events",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/interact.html#PointerEventsProperty"
}
],
"description": {
"kind": "markdown",
"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"
}
},
{
"name": "shape-rendering",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/painting.html#ShapeRenderingProperty"
}
],
"description": {
"kind": "markdown",
"value": "The **`shape-rendering`** attribute provides hints to the renderer about what tradeoffs to make when rendering shapes like paths, circles, or rectangles."
}
},
{
"name": "stop-color",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/pservers.html#StopColorProperty"
}
],
"description": {
"kind": "markdown",
"value": "The **`stop-color`** attribute indicates what color to use at a gradient stop."
}
},
{
"name": "stop-opacity",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/pservers.html#StopOpacityProperty"
}
],
"description": {
"kind": "markdown",
"value": "The **`stop-opacity`** attribute defines the opacity of a given color gradient stop."
}
},
{
"name": "stroke",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/painting.html#StrokeProperty"
}
],
"description": {
"kind": "markdown",
"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;"
}
},
{
"name": "stroke-dasharray",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/painting.html#StrokeDasharrayProperty"
}
],
"description": {
"kind": "markdown",
"value": "The **`stroke-dasharray`** attribute is a presentation attribute defining the pattern of dashes and gaps used to paint the outline of the shape;"
}
},
{
"name": "stroke-dashoffset",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/painting.html#StrokeDashoffsetProperty"
}
],
"description": {
"kind": "markdown",
"value": "The **`stroke-dashoffset`** attribute is a presentation attribute defining an offset on the rendering of the associated dash array."
}
},
{
"name": "stroke-linecap",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/painting.html#StrokeLinecapProperty"
}
],
"description": {
"kind": "markdown",
"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."
}
},
{
"name": "stroke-linejoin",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/painting.html#StrokeLinejoinProperty"
}
],
"description": {
"kind": "markdown",
"value": "The **`stroke-linejoin`** attribute is a presentation attribute defining the shape to be used at the corners of paths when they are stroked."
}
},
{
"name": "stroke-miterlimit",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/painting.html#StrokeMiterlimitProperty"
}
],
"description": {
"kind": "markdown",
"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."
}
},
{
"name": "stroke-opacity",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/painting.html#StrokeOpacityProperty"
}
],
"description": {
"kind": "markdown",
"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."
}
},
{
"name": "stroke-width",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/painting.html#StrokeWidthProperty"
}
],
"description": {
"kind": "markdown",
"value": "The **`stroke-width`** attribute is a presentation attribute defining the width of the stroke to be applied to the shape."
}
},
{
"name": "text-anchor",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/text.html#TextAnchorProperty"
}
],
"description": {
"kind": "markdown",
"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."
}
},
{
"name": "text-rendering",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/painting.html#TextRenderingProperty"
}
],
"description": {
"kind": "markdown",
"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"
}
},
{
"name": "transform",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/coords.html#TransformProperty"
}
],
"description": {
"kind": "markdown",
"value": "The **`transform`** attribute defines a list of transform definitions that are applied to an element and the element's children.\n\nSyntax: none | <transform-list>\n\nStatus: standard"
}
},
{
"name": "vector-effect",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/coords.html#VectorEffectProperty"
}
],
"description": {
"kind": "markdown",
"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."
}
},
{
"name": "x",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/geometry.html#XProperty"
}
],
"description": {
"kind": "markdown",
"value": "The **`x`** attribute defines a x-axis coordinate in the user coordinate system."
}
},
{
"name": "y",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/geometry.html#YProperty"
}
],
"description": {
"kind": "markdown",
"value": "The **`y`** attribute defines a y-axis coordinate in the user coordinate system."
}
},
{
"name": "cx",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/geometry.html#CxProperty"
}
],
"description": {
"kind": "markdown",
"value": "The **`cx`** attribute define the x-axis coordinate of a center point."
}
},
{
"name": "cy",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/geometry.html#CyProperty"
}
],
"description": {
"kind": "markdown",
"value": "The **`cy`** attribute define the y-axis coordinate of a center point."
}
},
{
"name": "r",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/geometry.html#RProperty"
}
],
"description": {
"kind": "markdown",
"value": "The **`r`** attribute defines the radius of a circle."
}
},
{
"name": "rx",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/geometry.html#RxProperty"
}
],
"description": {
"kind": "markdown",
"value": "The **`rx`** attribute defines a radius on the x-axis."
}
},
{
"name": "ry",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/geometry.html#RyProperty"
}
],
"description": {
"kind": "markdown",
"value": "The **`ry`** attribute defines a radius on the y-axis."
}
},
{
"name": "d",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/paths.html#DProperty"
}
],
"description": {
"kind": "markdown",
"value": "The **`d`** attribute defines a path to be drawn."
}
},
{
"name": "display",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/render.html#VisibilityControl"
}
],
"description": {
"kind": "markdown",
"value": "The `**display**` attribute lets you control the rendering of graphical or container elements.\n\nSyntax: [ <display-outside> || <display-inside> ] | <display-listitem> | <display-internal> | <display-box> | <display-legacy>\n\nStatus: standard"
}
},
{
"name": "opacity",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/render.html#ObjectAndGroupOpacityProperties"
}
],
"description": {
"kind": "markdown",
"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: <number>\n\nStatus: standard"
}
},
{
"name": "visibility",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/render.html#VisibilityControl"
}
],
"description": {
"kind": "markdown",
"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"
}
},
{
"name": "height",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/geometry.html#Sizing"
}
],
"description": {
"kind": "markdown",
"value": "The **`height`** attribute defines the vertical length of an element in the user coordinate system.\n\nSyntax: [ <length> | <percentage> ] && [ border-box | content-box ]? | available | min-content | max-content | fit-content | auto\n\nStatus: standard"
}
},
{
"name": "width",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/geometry.html#Sizing"
}
],
"description": {
"kind": "markdown",
"value": "The **`width`** attribute defines the horizontal length of an element in the user coordinate system.\n\nSyntax: [ <length> | <percentage> ] && [ border-box | content-box ]? | available | min-content | max-content | fit-content | auto\n\nStatus: standard"
}
},
{
"name": "line-height",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/text.html#LineHeightProperty"
}
],
"description": {
"kind": "markdown",
"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 | <number> | <length> | <percentage>\n\nStatus: standard"
}
},
{
"name": "shape-image-threshold",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/text.html#TextShapeImageThreshold"
}
],
"description": {
"kind": "markdown",
"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: <number>\n\nStatus: standard\n\nSupported browsers: FF62,S10.1,C37,O24"
}
},
{
"name": "shape-inside",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/text.html#TextShapeInside"
}
],
"description": {
"kind": "markdown",
"value": ""
}
},
{
"name": "shape-margin",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/text.html#TextShapeMargin"
}
],
"description": {
"kind": "markdown",
"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: <length-percentage>\n\nStatus: standard\n\nSupported browsers: FF62,S10.1,C37,O24"
}
},
{
"name": "shape-subtract",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/text.html#TextShapeSubtract"
}
],
"description": {
"kind": "markdown",
"value": ""
}
},
{
"name": "shape-padding",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/text.html#TextShapePadding"
}
],
"description": {
"kind": "markdown",
"value": ""
}
},
{
"name": "text-overflow",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/text.html#TextOverflowProperty"
}
],
"description": {
"kind": "markdown",
"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 | <string> ]{1,2}\n\nStatus: standard"
}
},
{
"name": "font-kerning",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/css-fonts-3/#font-kerning-prop"
}
],
"description": {
"kind": "markdown",
"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"
}
},
{
"name": "font",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/css-fonts-3/#font-prop"
}
],
"description": {
"kind": "markdown",
"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-variant-css21> || <'font-weight'> || <'font-stretch'> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ] | caption | icon | menu | message-box | small-caption | status-bar\n\nStatus: standard"
}
},
{
"name": "font-family",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/css-fonts-3/#font-family-prop"
}
],
"description": {
"kind": "markdown",
"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: [ <family-name> | <generic-family> ]#\n\nStatus: standard"
}
},
{
"name": "font-feature-settings",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/css-fonts-3/#font-feature-settings-prop"
}
],
"description": {
"kind": "markdown",
"value": "The **`font-feature-settings`** CSS property controls advanced typographic features in OpenType fonts.\n\nSyntax: normal | <feature-tag-value>#\n\nStatus: standard"
}
},
{
"name": "font-size",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/css-fonts-3/#font-size-prop"
}
],
"description": {
"kind": "markdown",
"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: <absolute-size> | <relative-size> | <length-percentage>\n\nStatus: standard"
}
},
{
"name": "font-size-adjust",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/css-fonts-3/#font-size-adjust-prop"
}
],
"description": {
"kind": "markdown",
"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 | <number>\n\nStatus: standard\n\nSupported browsers: FF40,C43,O30"
}
},
{
"name": "font-stretch",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/css-fonts-3/#font-stretch-prop"
}
],
"description": {
"kind": "markdown",
"value": "The **`font-stretch`** attribute indicates the desired amount of condensing or expansion in the glyphs used to render the text.\n\nSyntax: <font-stretch-absolute>\n\nStatus: standard"
}
},
{
"name": "font-style",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/css-fonts-3/#font-style-prop"
}
],
"description": {
"kind": "markdown",
"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 <angle>?\n\nStatus: standard"
}
},
{
"name": "font-variant",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/css-fonts-3/#propdef-font-variant"
}
],
"description": {
"kind": "markdown",
"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 | [ <common-lig-values> || <discretionary-lig-values> || <historical-lig-values> || <contextual-alt-values> || stylistic( <feature-value-name> ) || historical-forms || styleset( <feature-value-name># ) || character-variant( <feature-value-name># ) || swash( <feature-value-name> ) || ornaments( <feature-value-name> ) || annotation( <feature-value-name> ) || [ small-caps | all-small-caps | petite-caps | all-petite-caps | unicase | titling-caps ] || <numeric-figure-values> || <numeric-spacing-values> || <numeric-fraction-values> || ordinal || slashed-zero || <east-asian-variant-values> || <east-asian-width-values> || ruby ]\n\nStatus: standard"
}
},
{
"name": "font-variant-ligatures",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/css-fonts-3/#font-variant-ligatures-prop"
}
],
"description": {
"kind": "markdown",
"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 | [ <common-lig-values> || <discretionary-lig-values> || <historical-lig-values> || <contextual-alt-values> ]\n\nStatus: standard\n\nSupported browsers: FF34,S9.1,C34,O21"
}
},
{
"name": "font-weight",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/css-fonts-3/#font-weight-prop"
}
],
"description": {
"kind": "markdown",
"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: <font-weight-absolute> | bolder | lighter\n\nStatus: standard"
}
},
{
"name": "hanging-punctuation",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/css-text-3/#hanging-punctuation-property"
}
],
"description": {
"kind": "markdown",
"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"
}
},
{
"name": "hyphens",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/css-text-3/#hyphens-property"
}
],
"description": {
"kind": "markdown",
"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"
}
},
{
"name": "letter-spacing",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/css-text-3/#letter-spacing-property"
}
],
"description": {
"kind": "markdown",
"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 | <length>\n\nStatus: standard"
}
},
{
"name": "line-break",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/css-text-3/#line-break-property"
}
],
"description": {
"kind": "markdown",
"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"
}
},
{
"name": "overflow-wrap",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/css-text-3/#overflow-wrap-property"
}
],
"description": {
"kind": "markdown",
"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"
}
},
{
"name": "tab-size",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/css-text-3/#tab-size-property"
}
],
"description": {
"kind": "markdown",
"value": "The **`tab-size`** CSS property is used to customize the width of a tab (`U+0009`) character.\n\nSyntax: <integer> | <length>\n\nStatus: standard\n\nSupported browsers: FF4,S6.1,C21,O15"
}
},
{
"name": "text-align",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/css-text-3/#text-align-property"
}
],
"description": {
"kind": "markdown",
"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"
}
},
{
"name": "text-align-last",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/css-text-3/#text-align-last-property"
}
],
"description": {
"kind": "markdown",
"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"
}
},
{
"name": "text-indent",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/css-text-3/#text-indent-property"
}
],
"description": {
"kind": "markdown",
"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: <length-percentage> && hanging? && each-line?\n\nStatus: standard"
}
},
{
"name": "text-justify",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/css-text-3/#text-justify-property"
}
],
"description": {
"kind": "markdown",
"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"
}
},
{
"name": "text-transform",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/css-text-3/#text-transform-property"
}
],
"description": {
"kind": "markdown",
"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"
}
},
{
"name": "white-space",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/css-text-3/#white-space-property"
}
],
"description": {
"kind": "markdown",
"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"
}
},
{
"name": "word-break",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/css-text-3/#word-break-property"
}
],
"description": {
"kind": "markdown",
"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"
}
},
{
"name": "word-spacing",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/css-text-3/#word-spacing-property"
}
],
"description": {
"kind": "markdown",
"value": "The **`word-spacing`** attribute specifies spacing behavior between words.\n\nSyntax: normal | <length-percentage>\n\nStatus: standard"
}
},
{
"name": "word-wrap",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/css-text-3/#overflow-wrap-property"
}
],
"description": {
"kind": "markdown",
"value": "\n\nSyntax: normal | break-word\n\nStatus: standard"
}
},
{
"name": "vertical-align",
"references": [
{
"name": "SVG Spec",
"url": "https://drafts.csswg.org/css-inline/#transverse-alignment"
}
],
"description": {
"kind": "markdown",
"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 | <percentage> | <length>\n\nStatus: standard"
}
},
{
"name": "direction",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/text.html#DirectionProperty"
}
],
"description": {
"kind": "markdown",
"value": "The **`direction`** attribute specifies the inline-base direction of a [`<text>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/text \"The SVG <text> element draws a graphics element consisting of text. It's possible to apply a gradient, pattern, clipping path, mask, or filter to <text>, like any other SVG graphics element.\") or [`<tspan>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/tspan \"The SVG <tspan> element define a subtext within a <text> element or another <tspan> 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"
}
},
{
"name": "unicode-bidi",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/css-writing-modes-3/#unicode-bidi"
}
],
"description": {
"kind": "markdown",
"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"
}
},
{
"name": "writing-mode",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/text.html#WritingModeProperty"
}
],
"description": {
"kind": "markdown",
"value": "The **`writing-mode`** attribute specifies whether the initial inline-progression-direction for a [`<text>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/text \"The SVG <text> element draws a graphics element consisting of text. It's possible to apply a gradient, pattern, clipping path, mask, or filter to <text>, 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 [`<text>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/text \"The SVG <text> element draws a graphics element consisting of text. It's possible to apply a gradient, pattern, clipping path, mask, or filter to <text>, like any other SVG graphics element.\") elements; the attribute is ignored for [`<tspan>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/tspan \"The SVG <tspan> element define a subtext within a <text> element or another <tspan> element. It allows to adjust the style and/or position of that subtext as needed.\"), [`<tref>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/tref \"The textual content for a <text> SVG element can be either character data directly embedded within the <text> element or the character data content of a referenced element, where the referencing is specified with a <tref> element.\"), [`<altGlyph>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/altGlyph \"The <altGlyph> SVG element allows sophisticated selection of the glyphs used to render its child character data.\") and [`<textPath>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/textPath \"To render text along the shape of a <path>, enclose the text in a <textPath> element that has an href attribute with a reference to the <path> element.\") sub-elements. (Note that the inline-progression-direction can change within a [`<text>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/text \"The SVG <text> element draws a graphics element consisting of text. It's possible to apply a gradient, pattern, clipping path, mask, or filter to <text>, 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"
}
},
{
"name": "text-orientation",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/css3-writing-modes/#text-orientation"
}
],
"description": {
"kind": "markdown",
"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"
}
},
{
"name": "text-combine-upright",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/css-writing-modes-3/#text-combine-upright"
}
],
"description": {
"kind": "markdown",
"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 <integer>? ]\n\nStatus: standard"
}
},
{
"name": "text-decoration",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/text.html#TextDecorationProperties"
}
],
"description": {
"kind": "markdown",
"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"
}
},
{
"name": "text-decoration-line",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/text.html#TextDecorationProperties"
}
],
"description": {
"kind": "markdown",
"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"
}
},
{
"name": "text-decoration-style",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/text.html#TextDecorationProperties"
}
],
"description": {
"kind": "markdown",
"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"
}
},
{
"name": "text-decoration-color",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/text.html#TextDecorationProperties"
}
],
"description": {
"kind": "markdown",
"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: <color>\n\nStatus: standard\n\nSupported browsers: FF36,S,C57,O44"
}
},
{
"name": "object-fit",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/css3-images/#the-object-fit"
}
],
"description": {
"kind": "markdown",
"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 [`<img>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img \"The HTML <img> element embeds an image into the document. It is a replaced element.\") or [`<video>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video \"The HTML Video element (<video>) embeds a media player which supports video playback into the document.\"), should be resized to fit its container.\n\nSyntax: fill | contain | cover | none | scale-down\n\nStatus: standard\n\nSupported browsers: E16,FF36,S10,C31,O19"
}
},
{
"name": "object-position",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/css3-images/#the-object-position"
}
],
"description": {
"kind": "markdown",
"value": "The **`object-position`** [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property specifies the alignment of the selected [replaced element](https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element)'s contents within the element's box.\n\nSyntax: <position>\n\nStatus: standard\n\nSupported browsers: E16,FF36,S10,C31,O19"
}
},
{
"name": "outline",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/css-ui-4/#propdef-outline"
}
],
"description": {
"kind": "markdown",
"value": "The **`outline`** [CSS](https://developer.mozilla.org/en-US/docs/CSS) property is a [shorthand](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties) to set various outline properties in a single declaration: [`outline-style`](https://developer.mozilla.org/en-US/docs/Web/CSS/outline-style \"The outline-style CSS property sets the style of an element's outline. An outline is a line that is drawn around an element, outside the border.\"), [`outline-width`](https://developer.mozilla.org/en-US/docs/Web/CSS/outline-width \"The outline-width CSS property sets the thickness of an element's outline. An outline is a line that is drawn around an element, outside the border.\"), and [`outline-color`](https://developer.mozilla.org/en-US/docs/Web/CSS/outline-color \"The outline-color CSS property sets the color of an element's outline.\").\n\nSyntax: [ <'outline-color'> || <'outline-style'> || <'outline-width'> ]\n\nStatus: standard"
}
},
{
"name": "position",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/css-position-3/#propdef-position"
}
],
"description": {
"kind": "markdown",
"value": "The **`position`** [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS \"CSS\") property sets how an element is positioned in a document. The [`top`](https://developer.mozilla.org/en-US/docs/Web/CSS/top \"The top CSS property participates in specifying the vertical position of a positioned element. It has no effect on non-positioned elements.\"), [`right`](https://developer.mozilla.org/en-US/docs/Web/CSS/right \"The right CSS property participates in specifying the horizontal position of a positioned element. It has no effect on non-positioned elements.\"), [`bottom`](https://developer.mozilla.org/en-US/docs/Web/CSS/bottom \"The bottom CSS property participates in setting the vertical position of a positioned element. It has no effect on non-positioned elements.\"), and [`left`](https://developer.mozilla.org/en-US/docs/Web/CSS/left \"The left CSS property participates in specifying the horizontal position of a positioned element. It has no effect on non-positioned elements.\") properties determine the final location of positioned elements.\n\nSyntax: static | relative | absolute | sticky | fixed\n\nStatus: standard"
}
},
{
"name": "text-transform",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/css-text-3/#propdef-text-transform"
}
],
"description": {
"kind": "markdown",
"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"
}
},
{
"name": "border-top-style",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/css-backgrounds-3/#propdef-border-top-style"
}
],
"description": {
"kind": "markdown",
"value": "The **`border-top-style`** [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets the line style of an element's top [`border`](https://developer.mozilla.org/en-US/docs/Web/CSS/border \"The border shorthand CSS property sets an element's border.\").\n\nSyntax: <line-style>\n\nStatus: standard"
}
},
{
"name": "border-style",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/css-backgrounds-3/#propdef-border-style"
}
],
"description": {
"kind": "markdown",
"value": "The **`border-style`** [shorthand](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties) [CSS](https://developer.mozilla.org/en/CSS \"CSS\") property sets the line style for all four sides of an element's border.\n\nSyntax: <line-style>{1,4}\n\nStatus: standard"
}
},
{
"name": "float",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/CSS21/visuren.html#propdef-float"
}
],
"description": {
"kind": "markdown",
"value": "The **`float`** CSS property places an element on the left or right side of its container, allowing text and inline elements to wrap around it.\n\nSyntax: left | right | none | inline-start | inline-end\n\nStatus: standard"
}
},
{
"name": "margin-top",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/css-box-3/#propdef-margin-top"
}
],
"description": {
"kind": "markdown",
"value": "The **`margin-top`** [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets the [margin area](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model) on the top of an element. A positive value places it farther from its neighbors, while a negative value places it closer.\n\nSyntax: <length> | <percentage> | auto\n\nStatus: standard"
}
},
{
"name": "content",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/css-content-3/#propdef-content"
}
],
"description": {
"kind": "markdown",
"value": "The **`content`** [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property replaces an element with a generated value. Objects inserted using the `content` property are _anonymous [replaced elements](https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element)._\n\nSyntax: normal | none | [ <content-replacement> | <content-list> ] [/ <string> ]?\n\nStatus: standard"
}
},
{
"name": "transform-box",
"references": [
{
"name": "SVG Spec",
"url": "https://drafts.csswg.org/css-transforms/#transform-box"
}
],
"description": {
"kind": "markdown",
"value": "The **`transform-box`** CSS property defines the layout box to which the [`transform`](https://developer.mozilla.org/en-US/docs/Web/CSS/transform \"The transform CSS property lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS visual formatting model.\") and [`transform-origin`](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin \"The transform-origin CSS property sets the origin for an element's transformations.\") properties relate.\n\nSyntax: border-box | fill-box | view-box\n\nStatus: standard\n\nSupported browsers: FF55,C64,O51"
}
},
{
"name": "transform-origin",
"references": [
{
"name": "SVG Spec",
"url": "https://drafts.csswg.org/css-transforms/#transform-origin-property"
}
],
"description": {
"kind": "markdown",
"value": "The **`transform-origin`** [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets the origin for an element's transformations.\n\nSyntax: [ <length-percentage> | left | center | right | top | bottom ] | [ [ <length-percentage> | left | center | right ] && [ <length-percentage> | top | center | bottom ] ] <length>?\n\nStatus: standard"
}
},
{
"name": "will-change",
"references": [
{
"name": "SVG Spec",
"url": "https://drafts.csswg.org/css-will-change/#will-change"
}
],
"description": {
"kind": "markdown",
"value": "The **`will-change`** [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property hints to browsers how an element is expected to change. Browsers may set up optimizations before an element is actually changed.\n\nSyntax: auto | <animateable-feature>#\n\nStatus: standard\n\nSupported browsers: FF36,S9.1,C36,O24"
}
},
{
"name": "background",
"references": [
{
"name": "SVG Spec",
"url": "https://drafts.csswg.org/css-backgrounds-3/#background"
}
],
"description": {
"kind": "markdown",
"value": "The **`background`** [shorthand](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties) [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets all background style properties at once, such as color, image, origin and size, or repeat method.\n\nSyntax: [ <bg-layer> , ]* <final-bg-layer>\n\nStatus: standard"
}
},
{
"name": "min-width",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/css-sizing-3/#propdef-min-width"
}
],
"description": {
"kind": "markdown",
"value": "The **`min-width`** [CSS](https://developer.mozilla.org/en-US/docs/CSS) property sets the minimum width of an element. It prevents the [used value](https://developer.mozilla.org/en-US/docs/Web/CSS/used_value) of 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.\") property from becoming smaller than the value specified for `min-width`.\n\nSyntax: <length> | <percentage> | auto | max-content | min-content | fit-content | fill-available\n\nStatus: standard"
}
},
{
"name": "max-width",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/css-sizing-3/#propdef-max-width"
}
],
"description": {
"kind": "markdown",
"value": "The **`max-width`** [CSS](https://developer.mozilla.org/en-US/docs/CSS) property sets the maximum width of an element. It prevents the [used value](https://developer.mozilla.org/en-US/docs/Web/CSS/used_value) of 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.\") property from becoming larger than the value specified by `max-width`.\n\nSyntax: <length> | <percentage> | none | max-content | min-content | fit-content | fill-available\n\nStatus: standard"
}
},
{
"name": "block-size",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/http://dev.w3.org/csswg/css-writing-modes/#block-size"
}
],
"description": {
"kind": "markdown",
"value": "The **`block-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"
}
},
{
"name": "shape-outside",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/css-shapes/#shape-outside-property"
}
],
"description": {
"kind": "markdown",
"value": "The **`shape-outside`** [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property defines a shape—which may be non-rectangular—around which adjacent inline content should wrap.\n\nSyntax: none | <shape-box> || <basic-shape> | <image>\n\nStatus: standard\n\nSupported browsers: FF62,S10.1,C37,O24"
}
},
{
"name": "alignment-baseline",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/text.html#AlignmentBaselineProperty"
}
],
"description": {
"kind": "markdown",
"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."
}
},
{
"name": "baseline-shift",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/text.html#BaselineShiftProperty"
}
],
"description": {
"kind": "markdown",
"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."
}
},
{
"name": "color",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/painting.html#ColorProperty"
}
],
"description": {
"kind": "markdown",
"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: <color>\n\nStatus: standard"
}
},
{
"name": "color-interpolation",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/painting.html#ColorInterpolationProperty"
}
],
"description": {
"kind": "markdown",
"value": "The **`color-interpolation`** attribute specifies the color space for gradient interpolations, color animations, and alpha compositing."
}
},
{
"name": "color-rendering",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/painting.html#ColorRenderingProperty"
}
],
"description": {
"kind": "markdown",
"value": "The **`color-rendering`** attribute provides a hint to the SVG user agent about how to optimize its color interpolation and compositing operations."
}
},
{
"name": "cursor",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/css-ui-3/#cursor"
}
],
"description": {
"kind": "markdown",
"value": "The `cursor` attribute specifies the mouse cursor displayed when the mouse pointer is over an element.\n\nSyntax: [ [ <url> [ <x> <y> ]? , ]* [ 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"
}
},
{
"name": "dominant-baseline",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/text.html#DominantBaselineProperty"
}
],
"description": {
"kind": "markdown",
"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."
}
},
{
"name": "fill",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/painting.html#FillProperty"
}
],
"description": {
"kind": "markdown",
"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."
}
},
{
"name": "fill-opacity",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/painting.html#FillOpacityProperty"
}
],
"description": {
"kind": "markdown",
"value": "The **`fill-opacity`** attribute is a presentation attribute defining the opacity of the paint server (_color_, _gradient_, _pattern_, etc) applied to a shape."
}
},
{
"name": "fill-rule",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/painting.html#FillRuleProperty"
}
],
"description": {
"kind": "markdown",
"value": "The **`fill-rule`** attribute is a presentation attribute defining the algorithm to use to determine the _inside_ part of a shape."
}
},
{
"name": "glyph-orientation-horizontal",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/text.html#GlyphOrientationHorizontalProperty"
}
],
"description": {
"kind": "markdown",
"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."
}
},
{
"name": "glyph-orientation-vertical",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/text.html#GlyphOrientationVerticalProperty"
}
],
"description": {
"kind": "markdown",
"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."
}
},
{
"name": "image-rendering",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/painting.html#ImageRenderingProperty"
}
],
"description": {
"kind": "markdown",
"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"
}
},
{
"name": "inline-size",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/text.html#InlineSizeProperty"
}
],
"description": {
"kind": "markdown",
"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"
}
},
{
"name": "marker",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/painting.html#MarkerProperty"
}
],
"description": {
"kind": "markdown",
"value": ""
}
},
{
"name": "marker-end",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/painting.html#MarkerEndProperty"
}
],
"description": {
"kind": "markdown",
"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)."
}
},
{
"name": "marker-mid",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/painting.html#MarkerMidProperty"
}
],
"description": {
"kind": "markdown",
"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)."
}
},
{
"name": "marker-start",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/painting.html#MarkerStartProperty"
}
],
"description": {
"kind": "markdown",
"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)."
}
},
{
"name": "overflow",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/render.html#OverflowAndClipProperties"
}
],
"description": {
"kind": "markdown",
"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"
}
},
{
"name": "paint-order",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/painting.html#PaintOrderProperty"
}
],
"description": {
"kind": "markdown",
"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"
}
},
{
"name": "pointer-events",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/interact.html#PointerEventsProperty"
}
],
"description": {
"kind": "markdown",
"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"
}
},
{
"name": "shape-rendering",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/painting.html#ShapeRenderingProperty"
}
],
"description": {
"kind": "markdown",
"value": "The **`shape-rendering`** attribute provides hints to the renderer about what tradeoffs to make when rendering shapes like paths, circles, or rectangles."
}
},
{
"name": "stop-color",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/pservers.html#StopColorProperty"
}
],
"description": {
"kind": "markdown",
"value": "The **`stop-color`** attribute indicates what color to use at a gradient stop."
}
},
{
"name": "stop-opacity",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/pservers.html#StopOpacityProperty"
}
],
"description": {
"kind": "markdown",
"value": "The **`stop-opacity`** attribute defines the opacity of a given color gradient stop."
}
},
{
"name": "stroke",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/painting.html#StrokeProperty"
}
],
"description": {
"kind": "markdown",
"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;"
}
},
{
"name": "stroke-dasharray",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/painting.html#StrokeDasharrayProperty"
}
],
"description": {
"kind": "markdown",
"value": "The **`stroke-dasharray`** attribute is a presentation attribute defining the pattern of dashes and gaps used to paint the outline of the shape;"
}
},
{
"name": "stroke-dashoffset",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/painting.html#StrokeDashoffsetProperty"
}
],
"description": {
"kind": "markdown",
"value": "The **`stroke-dashoffset`** attribute is a presentation attribute defining an offset on the rendering of the associated dash array."
}
},
{
"name": "stroke-linecap",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/painting.html#StrokeLinecapProperty"
}
],
"description": {
"kind": "markdown",
"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."
}
},
{
"name": "stroke-linejoin",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/painting.html#StrokeLinejoinProperty"
}
],
"description": {
"kind": "markdown",
"value": "The **`stroke-linejoin`** attribute is a presentation attribute defining the shape to be used at the corners of paths when they are stroked."
}
},
{
"name": "stroke-miterlimit",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/painting.html#StrokeMiterlimitProperty"
}
],
"description": {
"kind": "markdown",
"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."
}
},
{
"name": "stroke-opacity",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/painting.html#StrokeOpacityProperty"
}
],
"description": {
"kind": "markdown",
"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."
}
},
{
"name": "stroke-width",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/painting.html#StrokeWidthProperty"
}
],
"description": {
"kind": "markdown",
"value": "The **`stroke-width`** attribute is a presentation attribute defining the width of the stroke to be applied to the shape."
}
},
{
"name": "text-anchor",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/text.html#TextAnchorProperty"
}
],
"description": {
"kind": "markdown",
"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."
}
},
{
"name": "text-rendering",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/painting.html#TextRenderingProperty"
}
],
"description": {
"kind": "markdown",
"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"
}
},
{
"name": "transform",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/coords.html#TransformProperty"
}
],
"description": {
"kind": "markdown",
"value": "The **`transform`** attribute defines a list of transform definitions that are applied to an element and the element's children.\n\nSyntax: none | <transform-list>\n\nStatus: standard"
}
},
{
"name": "vector-effect",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/coords.html#VectorEffectProperty"
}
],
"description": {
"kind": "markdown",
"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."
}
},
{
"name": "x",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/geometry.html#XProperty"
}
],
"description": {
"kind": "markdown",
"value": "The **`x`** attribute defines a x-axis coordinate in the user coordinate system."
}
},
{
"name": "y",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/geometry.html#YProperty"
}
],
"description": {
"kind": "markdown",
"value": "The **`y`** attribute defines a y-axis coordinate in the user coordinate system."
}
},
{
"name": "cx",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/geometry.html#CxProperty"
}
],
"description": {
"kind": "markdown",
"value": "The **`cx`** attribute define the x-axis coordinate of a center point."
}
},
{
"name": "cy",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/geometry.html#CyProperty"
}
],
"description": {
"kind": "markdown",
"value": "The **`cy`** attribute define the y-axis coordinate of a center point."
}
},
{
"name": "r",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/geometry.html#RProperty"
}
],
"description": {
"kind": "markdown",
"value": "The **`r`** attribute defines the radius of a circle."
}
},
{
"name": "rx",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/geometry.html#RxProperty"
}
],
"description": {
"kind": "markdown",
"value": "The **`rx`** attribute defines a radius on the x-axis."
}
},
{
"name": "ry",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/geometry.html#RyProperty"
}
],
"description": {
"kind": "markdown",
"value": "The **`ry`** attribute defines a radius on the y-axis."
}
},
{
"name": "d",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/paths.html#DProperty"
}
],
"description": {
"kind": "markdown",
"value": "The **`d`** attribute defines a path to be drawn."
}
},
{
"name": "display",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/render.html#VisibilityControl"
}
],
"description": {
"kind": "markdown",
"value": "The `**display**` attribute lets you control the rendering of graphical or container elements.\n\nSyntax: [ <display-outside> || <display-inside> ] | <display-listitem> | <display-internal> | <display-box> | <display-legacy>\n\nStatus: standard"
}
},
{
"name": "opacity",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/render.html#ObjectAndGroupOpacityProperties"
}
],
"description": {
"kind": "markdown",
"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: <number>\n\nStatus: standard"
}
},
{
"name": "visibility",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/render.html#VisibilityControl"
}
],
"description": {
"kind": "markdown",
"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"
}
},
{
"name": "height",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/geometry.html#Sizing"
}
],
"description": {
"kind": "markdown",
"value": "The **`height`** attribute defines the vertical length of an element in the user coordinate system.\n\nSyntax: [ <length> | <percentage> ] && [ border-box | content-box ]? | available | min-content | max-content | fit-content | auto\n\nStatus: standard"
}
},
{
"name": "width",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/geometry.html#Sizing"
}
],
"description": {
"kind": "markdown",
"value": "The **`width`** attribute defines the horizontal length of an element in the user coordinate system.\n\nSyntax: [ <length> | <percentage> ] && [ border-box | content-box ]? | available | min-content | max-content | fit-content | auto\n\nStatus: standard"
}
},
{
"name": "line-height",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/text.html#LineHeightProperty"
}
],
"description": {
"kind": "markdown",
"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 | <number> | <length> | <percentage>\n\nStatus: standard"
}
},
{
"name": "shape-image-threshold",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/text.html#TextShapeImageThreshold"
}
],
"description": {
"kind": "markdown",
"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: <number>\n\nStatus: standard\n\nSupported browsers: FF62,S10.1,C37,O24"
}
},
{
"name": "shape-inside",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/text.html#TextShapeInside"
}
],
"description": {
"kind": "markdown",
"value": ""
}
},
{
"name": "shape-margin",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/text.html#TextShapeMargin"
}
],
"description": {
"kind": "markdown",
"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: <length-percentage>\n\nStatus: standard\n\nSupported browsers: FF62,S10.1,C37,O24"
}
},
{
"name": "shape-subtract",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/text.html#TextShapeSubtract"
}
],
"description": {
"kind": "markdown",
"value": ""
}
},
{
"name": "shape-padding",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/text.html#TextShapePadding"
}
],
"description": {
"kind": "markdown",
"value": ""
}
},
{
"name": "text-overflow",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/text.html#TextOverflowProperty"
}
],
"description": {
"kind": "markdown",
"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 | <string> ]{1,2}\n\nStatus: standard"
}
},
{
"name": "font-kerning",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/css-fonts-3/#font-kerning-prop"
}
],
"description": {
"kind": "markdown",
"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"
}
},
{
"name": "font",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/css-fonts-3/#font-prop"
}
],
"description": {
"kind": "markdown",
"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-variant-css21> || <'font-weight'> || <'font-stretch'> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ] | caption | icon | menu | message-box | small-caption | status-bar\n\nStatus: standard"
}
},
{
"name": "font-family",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/css-fonts-3/#font-family-prop"
}
],
"description": {
"kind": "markdown",
"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: [ <family-name> | <generic-family> ]#\n\nStatus: standard"
}
},
{
"name": "font-feature-settings",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/css-fonts-3/#font-feature-settings-prop"
}
],
"description": {
"kind": "markdown",
"value": "The **`font-feature-settings`** CSS property controls advanced typographic features in OpenType fonts.\n\nSyntax: normal | <feature-tag-value>#\n\nStatus: standard"
}
},
{
"name": "font-size",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/css-fonts-3/#font-size-prop"
}
],
"description": {
"kind": "markdown",
"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: <absolute-size> | <relative-size> | <length-percentage>\n\nStatus: standard"
}
},
{
"name": "font-size-adjust",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/css-fonts-3/#font-size-adjust-prop"
}
],
"description": {
"kind": "markdown",
"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 | <number>\n\nStatus: standard\n\nSupported browsers: FF40,C43,O30"
}
},
{
"name": "font-stretch",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/css-fonts-3/#font-stretch-prop"
}
],
"description": {
"kind": "markdown",
"value": "The **`font-stretch`** attribute indicates the desired amount of condensing or expansion in the glyphs used to render the text.\n\nSyntax: <font-stretch-absolute>\n\nStatus: standard"
}
},
{
"name": "font-style",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/css-fonts-3/#font-style-prop"
}
],
"description": {
"kind": "markdown",
"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 <angle>?\n\nStatus: standard"
}
},
{
"name": "font-variant",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/css-fonts-3/#propdef-font-variant"
}
],
"description": {
"kind": "markdown",
"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 | [ <common-lig-values> || <discretionary-lig-values> || <historical-lig-values> || <contextual-alt-values> || stylistic( <feature-value-name> ) || historical-forms || styleset( <feature-value-name># ) || character-variant( <feature-value-name># ) || swash( <feature-value-name> ) || ornaments( <feature-value-name> ) || annotation( <feature-value-name> ) || [ small-caps | all-small-caps | petite-caps | all-petite-caps | unicase | titling-caps ] || <numeric-figure-values> || <numeric-spacing-values> || <numeric-fraction-values> || ordinal || slashed-zero || <east-asian-variant-values> || <east-asian-width-values> || ruby ]\n\nStatus: standard"
}
},
{
"name": "font-variant-ligatures",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/css-fonts-3/#font-variant-ligatures-prop"
}
],
"description": {
"kind": "markdown",
"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 | [ <common-lig-values> || <discretionary-lig-values> || <historical-lig-values> || <contextual-alt-values> ]\n\nStatus: standard\n\nSupported browsers: FF34,S9.1,C34,O21"
}
},
{
"name": "font-weight",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/css-fonts-3/#font-weight-prop"
}
],
"description": {
"kind": "markdown",
"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: <font-weight-absolute> | bolder | lighter\n\nStatus: standard"
}
},
{
"name": "hanging-punctuation",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/css-text-3/#hanging-punctuation-property"
}
],
"description": {
"kind": "markdown",
"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"
}
},
{
"name": "hyphens",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/css-text-3/#hyphens-property"
}
],
"description": {
"kind": "markdown",
"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"
}
},
{
"name": "letter-spacing",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/css-text-3/#letter-spacing-property"
}
],
"description": {
"kind": "markdown",
"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 | <length>\n\nStatus: standard"
}
},
{
"name": "line-break",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/css-text-3/#line-break-property"
}
],
"description": {
"kind": "markdown",
"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"
}
},
{
"name": "overflow-wrap",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/css-text-3/#overflow-wrap-property"
}
],
"description": {
"kind": "markdown",
"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"
}
},
{
"name": "tab-size",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/css-text-3/#tab-size-property"
}
],
"description": {
"kind": "markdown",
"value": "The **`tab-size`** CSS property is used to customize the width of a tab (`U+0009`) character.\n\nSyntax: <integer> | <length>\n\nStatus: standard\n\nSupported browsers: FF4,S6.1,C21,O15"
}
},
{
"name": "text-align",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/css-text-3/#text-align-property"
}
],
"description": {
"kind": "markdown",
"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"
}
},
{
"name": "text-align-last",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/css-text-3/#text-align-last-property"
}
],
"description": {
"kind": "markdown",
"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"
}
},
{
"name": "text-indent",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/css-text-3/#text-indent-property"
}
],
"description": {
"kind": "markdown",
"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: <length-percentage> && hanging? && each-line?\n\nStatus: standard"
}
},
{
"name": "text-justify",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/css-text-3/#text-justify-property"
}
],
"description": {
"kind": "markdown",
"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"
}
},
{
"name": "text-transform",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/css-text-3/#text-transform-property"
}
],
"description": {
"kind": "markdown",
"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"
}
},
{
"name": "white-space",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/css-text-3/#white-space-property"
}
],
"description": {
"kind": "markdown",
"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"
}
},
{
"name": "word-break",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/css-text-3/#word-break-property"
}
],
"description": {
"kind": "markdown",
"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"
}
},
{
"name": "word-spacing",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/css-text-3/#word-spacing-property"
}
],
"description": {
"kind": "markdown",
"value": "The **`word-spacing`** attribute specifies spacing behavior between words.\n\nSyntax: normal | <length-percentage>\n\nStatus: standard"
}
},
{
"name": "word-wrap",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/css-text-3/#overflow-wrap-property"
}
],
"description": {
"kind": "markdown",
"value": "\n\nSyntax: normal | break-word\n\nStatus: standard"
}
},
{
"name": "vertical-align",
"references": [
{
"name": "SVG Spec",
"url": "https://drafts.csswg.org/css-inline/#transverse-alignment"
}
],
"description": {
"kind": "markdown",
"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 | <percentage> | <length>\n\nStatus: standard"
}
},
{
"name": "direction",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/text.html#DirectionProperty"
}
],
"description": {
"kind": "markdown",
"value": "The **`direction`** attribute specifies the inline-base direction of a [`<text>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/text \"The SVG <text> element draws a graphics element consisting of text. It's possible to apply a gradient, pattern, clipping path, mask, or filter to <text>, like any other SVG graphics element.\") or [`<tspan>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/tspan \"The SVG <tspan> element define a subtext within a <text> element or another <tspan> 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"
}
},
{
"name": "unicode-bidi",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/css-writing-modes-3/#unicode-bidi"
}
],
"description": {
"kind": "markdown",
"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"
}
},
{
"name": "writing-mode",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/text.html#WritingModeProperty"
}
],
"description": {
"kind": "markdown",
"value": "The **`writing-mode`** attribute specifies whether the initial inline-progression-direction for a [`<text>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/text \"The SVG <text> element draws a graphics element consisting of text. It's possible to apply a gradient, pattern, clipping path, mask, or filter to <text>, 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 [`<text>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/text \"The SVG <text> element draws a graphics element consisting of text. It's possible to apply a gradient, pattern, clipping path, mask, or filter to <text>, like any other SVG graphics element.\") elements; the attribute is ignored for [`<tspan>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/tspan \"The SVG <tspan> element define a subtext within a <text> element or another <tspan> element. It allows to adjust the style and/or position of that subtext as needed.\"), [`<tref>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/tref \"The textual content for a <text> SVG element can be either character data directly embedded within the <text> element or the character data content of a referenced element, where the referencing is specified with a <tref> element.\"), [`<altGlyph>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/altGlyph \"The <altGlyph> SVG element allows sophisticated selection of the glyphs used to render its child character data.\") and [`<textPath>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/textPath \"To render text along the shape of a <path>, enclose the text in a <textPath> element that has an href attribute with a reference to the <path> element.\") sub-elements. (Note that the inline-progression-direction can change within a [`<text>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/text \"The SVG <text> element draws a graphics element consisting of text. It's possible to apply a gradient, pattern, clipping path, mask, or filter to <text>, 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"
}
},
{
"name": "text-orientation",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/css3-writing-modes/#text-orientation"
}
],
"description": {
"kind": "markdown",
"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"
}
},
{
"name": "text-combine-upright",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/css-writing-modes-3/#text-combine-upright"
}
],
"description": {
"kind": "markdown",
"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 <integer>? ]\n\nStatus: standard"
}
},
{
"name": "text-decoration",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/text.html#TextDecorationProperties"
}
],
"description": {
"kind": "markdown",
"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"
}
},
{
"name": "text-decoration-line",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/text.html#TextDecorationProperties"
}
],
"description": {
"kind": "markdown",
"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"
}
},
{
"name": "text-decoration-style",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/text.html#TextDecorationProperties"
}
],
"description": {
"kind": "markdown",
"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"
}
},
{
"name": "text-decoration-color",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/text.html#TextDecorationProperties"
}
],
"description": {
"kind": "markdown",
"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: <color>\n\nStatus: standard\n\nSupported browsers: FF36,S,C57,O44"
}
},
{
"name": "object-fit",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/css3-images/#the-object-fit"
}
],
"description": {
"kind": "markdown",
"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 [`<img>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img \"The HTML <img> element embeds an image into the document. It is a replaced element.\") or [`<video>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video \"The HTML Video element (<video>) embeds a media player which supports video playback into the document.\"), should be resized to fit its container.\n\nSyntax: fill | contain | cover | none | scale-down\n\nStatus: standard\n\nSupported browsers: E16,FF36,S10,C31,O19"
}
},
{
"name": "object-position",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/css3-images/#the-object-position"
}
],
"description": {
"kind": "markdown",
"value": "The **`object-position`** [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property specifies the alignment of the selected [replaced element](https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element)'s contents within the element's box.\n\nSyntax: <position>\n\nStatus: standard\n\nSupported browsers: E16,FF36,S10,C31,O19"
}
},
{
"name": "outline",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/css-ui-4/#propdef-outline"
}
],
"description": {
"kind": "markdown",
"value": "The **`outline`** [CSS](https://developer.mozilla.org/en-US/docs/CSS) property is a [shorthand](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties) to set various outline properties in a single declaration: [`outline-style`](https://developer.mozilla.org/en-US/docs/Web/CSS/outline-style \"The outline-style CSS property sets the style of an element's outline. An outline is a line that is drawn around an element, outside the border.\"), [`outline-width`](https://developer.mozilla.org/en-US/docs/Web/CSS/outline-width \"The outline-width CSS property sets the thickness of an element's outline. An outline is a line that is drawn around an element, outside the border.\"), and [`outline-color`](https://developer.mozilla.org/en-US/docs/Web/CSS/outline-color \"The outline-color CSS property sets the color of an element's outline.\").\n\nSyntax: [ <'outline-color'> || <'outline-style'> || <'outline-width'> ]\n\nStatus: standard"
}
},
{
"name": "position",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/css-position-3/#propdef-position"
}
],
"description": {
"kind": "markdown",
"value": "The **`position`** [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS \"CSS\") property sets how an element is positioned in a document. The [`top`](https://developer.mozilla.org/en-US/docs/Web/CSS/top \"The top CSS property participates in specifying the vertical position of a positioned element. It has no effect on non-positioned elements.\"), [`right`](https://developer.mozilla.org/en-US/docs/Web/CSS/right \"The right CSS property participates in specifying the horizontal position of a positioned element. It has no effect on non-positioned elements.\"), [`bottom`](https://developer.mozilla.org/en-US/docs/Web/CSS/bottom \"The bottom CSS property participates in setting the vertical position of a positioned element. It has no effect on non-positioned elements.\"), and [`left`](https://developer.mozilla.org/en-US/docs/Web/CSS/left \"The left CSS property participates in specifying the horizontal position of a positioned element. It has no effect on non-positioned elements.\") properties determine the final location of positioned elements.\n\nSyntax: static | relative | absolute | sticky | fixed\n\nStatus: standard"
}
},
{
"name": "text-transform",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/css-text-3/#propdef-text-transform"
}
],
"description": {
"kind": "markdown",
"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"
}
},
{
"name": "border-top-style",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/css-backgrounds-3/#propdef-border-top-style"
}
],
"description": {
"kind": "markdown",
"value": "The **`border-top-style`** [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets the line style of an element's top [`border`](https://developer.mozilla.org/en-US/docs/Web/CSS/border \"The border shorthand CSS property sets an element's border.\").\n\nSyntax: <line-style>\n\nStatus: standard"
}
},
{
"name": "border-style",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/css-backgrounds-3/#propdef-border-style"
}
],
"description": {
"kind": "markdown",
"value": "The **`border-style`** [shorthand](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties) [CSS](https://developer.mozilla.org/en/CSS \"CSS\") property sets the line style for all four sides of an element's border.\n\nSyntax: <line-style>{1,4}\n\nStatus: standard"
}
},
{
"name": "float",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/CSS21/visuren.html#propdef-float"
}
],
"description": {
"kind": "markdown",
"value": "The **`float`** CSS property places an element on the left or right side of its container, allowing text and inline elements to wrap around it.\n\nSyntax: left | right | none | inline-start | inline-end\n\nStatus: standard"
}
},
{
"name": "margin-top",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/css-box-3/#propdef-margin-top"
}
],
"description": {
"kind": "markdown",
"value": "The **`margin-top`** [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets the [margin area](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model) on the top of an element. A positive value places it farther from its neighbors, while a negative value places it closer.\n\nSyntax: <length> | <percentage> | auto\n\nStatus: standard"
}
},
{
"name": "content",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/css-content-3/#propdef-content"
}
],
"description": {
"kind": "markdown",
"value": "The **`content`** [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property replaces an element with a generated value. Objects inserted using the `content` property are _anonymous [replaced elements](https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element)._\n\nSyntax: normal | none | [ <content-replacement> | <content-list> ] [/ <string> ]?\n\nStatus: standard"
}
},
{
"name": "transform-box",
"references": [
{
"name": "SVG Spec",
"url": "https://drafts.csswg.org/css-transforms/#transform-box"
}
],
"description": {
"kind": "markdown",
"value": "The **`transform-box`** CSS property defines the layout box to which the [`transform`](https://developer.mozilla.org/en-US/docs/Web/CSS/transform \"The transform CSS property lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS visual formatting model.\") and [`transform-origin`](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin \"The transform-origin CSS property sets the origin for an element's transformations.\") properties relate.\n\nSyntax: border-box | fill-box | view-box\n\nStatus: standard\n\nSupported browsers: FF55,C64,O51"
}
},
{
"name": "transform-origin",
"references": [
{
"name": "SVG Spec",
"url": "https://drafts.csswg.org/css-transforms/#transform-origin-property"
}
],
"description": {
"kind": "markdown",
"value": "The **`transform-origin`** [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets the origin for an element's transformations.\n\nSyntax: [ <length-percentage> | left | center | right | top | bottom ] | [ [ <length-percentage> | left | center | right ] && [ <length-percentage> | top | center | bottom ] ] <length>?\n\nStatus: standard"
}
},
{
"name": "will-change",
"references": [
{
"name": "SVG Spec",
"url": "https://drafts.csswg.org/css-will-change/#will-change"
}
],
"description": {
"kind": "markdown",
"value": "The **`will-change`** [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property hints to browsers how an element is expected to change. Browsers may set up optimizations before an element is actually changed.\n\nSyntax: auto | <animateable-feature>#\n\nStatus: standard\n\nSupported browsers: FF36,S9.1,C36,O24"
}
},
{
"name": "background",
"references": [
{
"name": "SVG Spec",
"url": "https://drafts.csswg.org/css-backgrounds-3/#background"
}
],
"description": {
"kind": "markdown",
"value": "The **`background`** [shorthand](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties) [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property sets all background style properties at once, such as color, image, origin and size, or repeat method.\n\nSyntax: [ <bg-layer> , ]* <final-bg-layer>\n\nStatus: standard"
}
},
{
"name": "min-width",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/css-sizing-3/#propdef-min-width"
}
],
"description": {
"kind": "markdown",
"value": "The **`min-width`** [CSS](https://developer.mozilla.org/en-US/docs/CSS) property sets the minimum width of an element. It prevents the [used value](https://developer.mozilla.org/en-US/docs/Web/CSS/used_value) of 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.\") property from becoming smaller than the value specified for `min-width`.\n\nSyntax: <length> | <percentage> | auto | max-content | min-content | fit-content | fill-available\n\nStatus: standard"
}
},
{
"name": "max-width",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/css-sizing-3/#propdef-max-width"
}
],
"description": {
"kind": "markdown",
"value": "The **`max-width`** [CSS](https://developer.mozilla.org/en-US/docs/CSS) property sets the maximum width of an element. It prevents the [used value](https://developer.mozilla.org/en-US/docs/Web/CSS/used_value) of 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.\") property from becoming larger than the value specified by `max-width`.\n\nSyntax: <length> | <percentage> | none | max-content | min-content | fit-content | fill-available\n\nStatus: standard"
}
},
{
"name": "block-size",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/http://dev.w3.org/csswg/css-writing-modes/#block-size"
}
],
"description": {
"kind": "markdown",
"value": "The **`block-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"
}
},
{
"name": "shape-outside",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/css-shapes/#shape-outside-property"
}
],
"description": {
"kind": "markdown",
"value": "The **`shape-outside`** [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property defines a shape—which may be non-rectangular—around which adjacent inline content should wrap.\n\nSyntax: none | <shape-box> || <basic-shape> | <image>\n\nStatus: standard\n\nSupported browsers: FF62,S10.1,C37,O24"
}
}
]
}
================================================
FILE: samples/svg/data/svg.html-data.json
================================================
{
"version": 1.1,
"tags": [
{
"name": "a",
"attributes": [
{
"name": "href",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/linking.html#AElementHrefAttribute"
}
]
},
{
"name": "target",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/linking.html#AElementTargetAttribute"
}
]
},
{
"name": "download",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/linking.html#AElementDownloadAttribute"
}
]
},
{
"name": "ping",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/linking.html#AElementPingAttribute"
}
]
},
{
"name": "rel",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/linking.html#AElementRelAttribute"
}
]
},
{
"name": "hreflang",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/linking.html#AElementHreflangAttribute"
}
]
},
{
"name": "type",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/linking.html#AElementTypeAttribute"
}
]
},
{
"name": "referrerpolicy",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/linking.html#AElementReferrerpolicyAttribute"
}
]
}
],
"attributeCategories": [
"aria",
"conditional processing",
"core",
"global event",
"document element event",
"graphical event",
"presentation",
"deprecated xlink"
],
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/linking.html#AElement"
}
]
},
{
"name": "audio",
"attributes": [],
"attributeCategories": [
"aria",
"core",
"conditional processing",
"global event",
"document element event",
"graphical event",
"presentation"
],
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/embedded.html#HTMLElements"
}
]
},
{
"name": "canvas",
"attributes": [
{
"name": "preserveAspectRatio",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"
}
]
}
],
"attributeCategories": [
"aria",
"core",
"conditional processing",
"global event",
"document element event",
"graphical event",
"presentation"
],
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/embedded.html#HTMLElements"
}
]
},
{
"name": "circle",
"attributes": [
{
"name": "pathLength",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/paths.html#PathLengthAttribute"
}
]
}
],
"attributeCategories": [
"aria",
"conditional processing",
"core",
"global event",
"document element event",
"graphical event",
"presentation"
],
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/shapes.html#CircleElement"
}
]
},
{
"name": "defs",
"attributes": [],
"attributeCategories": [
"core",
"graphical event",
"global event",
"document element event",
"presentation"
],
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/struct.html#DefsElement"
}
]
},
{
"name": "desc",
"attributes": [],
"attributeCategories": [
"core",
"global event",
"document element event"
],
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/struct.html#DescElement"
}
]
},
{
"name": "ellipse",
"attributes": [
{
"name": "pathLength",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/paths.html#PathLengthAttribute"
}
]
}
],
"attributeCategories": [
"aria",
"conditional processing",
"core",
"global event",
"document element event",
"graphical event",
"presentation"
],
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/shapes.html#EllipseElement"
}
]
},
{
"name": "foreignObject",
"attributes": [],
"attributeCategories": [
"aria",
"core",
"conditional processing",
"global event",
"document element event",
"graphical event",
"presentation"
],
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/embedded.html#ForeignObjectElement"
}
]
},
{
"name": "g",
"attributes": [],
"attributeCategories": [
"aria",
"conditional processing",
"core",
"global event",
"document element event",
"graphical event",
"presentation"
],
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/struct.html#GElement"
}
]
},
{
"name": "unknown",
"attributes": [],
"attributeCategories": [
"aria",
"core",
"conditional processing",
"global event",
"document element event",
"graphical event",
"presentation"
],
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/struct.html#UnknownElement"
}
]
},
{
"name": "iframe",
"attributes": [],
"attributeCategories": [
"aria",
"core",
"conditional processing",
"global event",
"document element event",
"graphical event",
"presentation"
],
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/embedded.html#HTMLElements"
}
]
},
{
"name": "image",
"attributes": [
{
"name": "preserveAspectRatio",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"
}
]
},
{
"name": "href",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/embedded.html#ImageElementHrefAttribute"
}
]
},
{
"name": "crossorigin",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/embedded.html#ImageElementCrossoriginAttribute"
}
]
}
],
"attributeCategories": [
"aria",
"core",
"conditional processing",
"global event",
"document element event",
"graphical event",
"deprecated xlink",
"presentation"
],
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/embedded.html#ImageElement"
}
]
},
{
"name": "line",
"attributes": [
{
"name": "pathLength",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/paths.html#PathLengthAttribute"
}
]
},
{
"name": "x1",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/shapes.html#LineElementX1Attribute"
}
]
},
{
"name": "y1",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/shapes.html#LineElementY1Attribute"
}
]
},
{
"name": "x2",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/shapes.html#LineElementX2Attribute"
}
]
},
{
"name": "y2",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/shapes.html#LineElementY2Attribute"
}
]
}
],
"attributeCategories": [
"aria",
"conditional processing",
"core",
"global event",
"document element event",
"graphical event",
"presentation"
],
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/shapes.html#LineElement"
}
]
},
{
"name": "linearGradient",
"attributes": [
{
"name": "x1",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/pservers.html#LinearGradientElementX1Attribute"
}
]
},
{
"name": "y1",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/pservers.html#LinearGradientElementY1Attribute"
}
]
},
{
"name": "x2",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/pservers.html#LinearGradientElementX2Attribute"
}
]
},
{
"name": "y2",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/pservers.html#LinearGradientElementY2Attribute"
}
]
},
{
"name": "gradientUnits",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/pservers.html#LinearGradientElementGradientUnitsAttribute"
}
]
},
{
"name": "gradientTransform",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/pservers.html#LinearGradientElementGradientTransformAttribute"
}
]
},
{
"name": "spreadMethod",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/pservers.html#LinearGradientElementSpreadMethodAttribute"
}
]
},
{
"name": "href",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/pservers.html#LinearGradientElementHrefAttribute"
}
]
}
],
"attributeCategories": [
"core",
"global event",
"document element event",
"presentation",
"deprecated xlink"
],
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/pservers.html#LinearGradientElement"
}
]
},
{
"name": "marker",
"attributes": [
{
"name": "viewBox",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute"
}
]
},
{
"name": "preserveAspectRatio",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"
}
]
},
{
"name": "refX",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/painting.html#MarkerElementRefXAttribute"
}
]
},
{
"name": "refY",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/painting.html#MarkerElementRefYAttribute"
}
]
},
{
"name": "markerUnits",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/painting.html#MarkerUnitsAttribute"
}
]
},
{
"name": "markerWidth",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/painting.html#MarkerWidthAttribute"
}
]
},
{
"name": "markerHeight",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/painting.html#MarkerHeightAttribute"
}
]
},
{
"name": "orient",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/painting.html#OrientAttribute"
}
]
}
],
"attributeCategories": [
"core",
"global event",
"document element event",
"presentation"
],
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/painting.html#MarkerElement"
}
]
},
{
"name": "metadata",
"attributes": [],
"attributeCategories": [
"core",
"global event",
"document element event"
],
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/struct.html#MetadataElement"
}
]
},
{
"name": "path",
"attributes": [
{
"name": "pathLength",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/paths.html#PathLengthAttribute"
}
]
}
],
"attributeCategories": [
"aria",
"conditional processing",
"core",
"global event",
"document element event",
"graphical event",
"presentation"
],
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/paths.html#PathElement"
}
]
},
{
"name": "pattern",
"attributes": [
{
"name": "viewBox",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute"
}
]
},
{
"name": "preserveAspectRatio",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute"
}
]
},
{
"name": "x",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/pservers.html#PatternElementXAttribute"
}
]
},
{
"name": "y",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/pservers.html#PatternElementYAttribute"
}
]
},
{
"name": "width",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/pservers.html#PatternElementWidthAttribute"
}
]
},
{
"name": "height",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/pservers.html#PatternElementHeightAttribute"
}
]
},
{
"name": "patternUnits",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/pservers.html#PatternElementPatternUnitsAttribute"
}
]
},
{
"name": "patternContentUnits",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/pservers.html#PatternElementPatternContentUnitsAttribute"
}
]
},
{
"name": "patternTransform",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/pservers.html#PatternElementPatternTransformAttribute"
}
]
},
{
"name": "href",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/pservers.html#PatternElementHrefAttribute"
}
]
}
],
"attributeCategories": [
"core",
"global event",
"presentation",
"deprecated xlink"
],
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/pservers.html#PatternElement"
}
]
},
{
"name": "polygon",
"attributes": [
{
"name": "pathLength",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/paths.html#PathLengthAttribute"
}
]
},
{
"name": "points",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/shapes.html#PolygonElementPointsAttribute"
}
]
}
],
"attributeCategories": [
"aria",
"conditional processing",
"core",
"global event",
"document element event",
"graphical event",
"presentation"
],
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/shapes.html#PolygonElement"
}
]
},
{
"name": "polyline",
"attributes": [
{
"name": "pathLength",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/paths.html#PathLengthAttribute"
}
]
},
{
"name": "points",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/shapes.html#PolylineElementPointsAttribute"
}
]
}
],
"attributeCategories": [
"aria",
"conditional processing",
"core",
"global event",
"document element event",
"graphical event",
"presentation"
],
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/shapes.html#PolylineElement"
}
]
},
{
"name": "radialGradient",
"attributes": [
{
"name": "cx",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/pservers.html#RadialGradientElementCXAttribute"
}
]
},
{
"name": "cy",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/pservers.html#RadialGradientElementCYAttribute"
}
]
},
{
"name": "r",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/pservers.html#RadialGradientElementRAttribute"
}
]
},
{
"name": "fx",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/pservers.html#RadialGradientElementFXAttribute"
}
]
},
{
"name": "fy",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/pservers.html#RadialGradientElementFYAttribute"
}
]
},
{
"name": "fr",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/pservers.html#RadialGradientElementFRAttribute"
}
]
},
{
"name": "gradientUnits",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/pservers.html#RadialGradientElementGradientUnitsAttribute"
}
]
},
{
"name": "gradientTransform",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/pservers.html#RadialGradientElementGradientTransformAttribute"
}
]
},
{
"name": "spreadMethod",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/pservers.html#RadialGradientElementSpreadMethodAttribute"
}
]
},
{
"name": "href",
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/pservers.html#RadialGradientElementHrefAttribute"
}
]
}
],
"attributeCategories": [
"core",
"global event",
"document element event",
"presentation",
"deprecated xlink"
],
"references": [
{
"name": "SVG Spec",
"url": "https://www.w3.org/TR/SVG/pservers.html#RadialGradientElement"
}
]
},
{
"name": "rect",
"attributes": [
{
gitextract_hh2g8fv3/
├── .github/
│ └── CONTRIBUTING.md
├── .gitignore
├── .vscode/
│ ├── launch.json
│ └── settings.json
├── CODE_OF_CONDUCT.md
├── LICENSE
├── README.md
├── SECURITY.md
├── build/
│ └── pipeline.yml
├── samples/
│ ├── helloworld/
│ │ ├── .vscode/
│ │ │ └── settings.json
│ │ ├── README.md
│ │ ├── css.css-data.json
│ │ ├── html.html-data.json
│ │ ├── test.css
│ │ └── test.html
│ ├── svg/
│ │ ├── .gitignore
│ │ ├── .vscode/
│ │ │ ├── launch.json
│ │ │ ├── settings.json
│ │ │ └── tasks.json
│ │ ├── README.md
│ │ ├── build/
│ │ │ ├── index.ts
│ │ │ ├── mdn-bcd.ts
│ │ │ ├── mdn-data.ts
│ │ │ ├── mdn-description.ts
│ │ │ ├── postprocess.ts
│ │ │ ├── svg-spec.ts
│ │ │ └── util.ts
│ │ ├── data/
│ │ │ ├── svg.css-data.json
│ │ │ └── svg.html-data.json
│ │ ├── package.json
│ │ ├── raw-data/
│ │ │ ├── definitions.xml
│ │ │ ├── svg-css-contribution.json
│ │ │ └── svg-html-contribution.json
│ │ ├── test.css
│ │ ├── test.html
│ │ └── tsconfig.json
│ └── webcomponents/
│ ├── .vscode/
│ │ └── settings.json
│ ├── README.md
│ ├── index.html
│ └── src/
│ ├── components/
│ │ └── my-component/
│ │ ├── docs.md
│ │ └── main.js
│ └── web-components.html-data.json
└── web-data/
├── CHANGELOG.md
├── LICENSE.md
├── README.md
├── css/
│ ├── add-atrule-descriptors.mjs
│ ├── chromestatus/
│ │ ├── applyRelevance.mjs
│ │ ├── attributeRelevance.mjs
│ │ └── updateRelevance.mjs
│ ├── css-schema.json
│ ├── generateData.mjs
│ ├── mdn/
│ │ ├── mdn-browser-compat-data-importer.mjs
│ │ ├── mdn-data-importer.mjs
│ │ ├── mdn-data-selector-importer.mjs
│ │ └── mdn-documentation.mjs
│ └── utils.mjs
├── data/
│ ├── browsers.css-data.json
│ └── browsers.html-data.json
├── html/
│ ├── ariaData.json
│ ├── ariaSpec.json
│ ├── generateData.mjs
│ ├── htmlEvents.json
│ ├── htmlGlobalAttributes.json
│ ├── htmlTags.json
│ ├── mdnTagDescriptions.json
│ ├── oldEvents.json
│ └── valueSets.json
└── package.json
SYMBOL INDEX (65 symbols across 18 files)
FILE: samples/svg/build/index.ts
function getStaticHTMLData (line 14) | function getStaticHTMLData() {
function attachAsyncHTMLDataFromMDN (line 26) | async function attachAsyncHTMLDataFromMDN(
function generateHTMLData (line 73) | async function generateHTMLData() {
function getStaticCSSData (line 98) | function getStaticCSSData(): CSSProperty[] {
function attachAsyncCSSDataFromMDN (line 107) | async function attachAsyncCSSDataFromMDN(cssProperties: CSSProperty[]): ...
function generateCSSData (line 126) | async function generateCSSData() {
function getHTMLData (line 145) | async function getHTMLData() {
FILE: samples/svg/build/mdn-bcd.ts
function htmlExport (line 10) | function htmlExport() {
function cssExport (line 39) | function cssExport() {
function addMDNData (line 61) | function addMDNData(properties: Partial<CSSProperty>[]) {
FILE: samples/svg/build/mdn-data.ts
function addCSSMDNData (line 11) | function addCSSMDNData(specProperty: CSSSpecProperty): CSSProperty {
function getPropertyStatus (line 27) | function getPropertyStatus(name: string) {
function getPropertySyntax (line 56) | function getPropertySyntax(name: string) {
function getPropertyBrowsers (line 62) | function getPropertyBrowsers(name: string) {
FILE: samples/svg/build/mdn-description.ts
type PropertyType (line 2) | type PropertyType = 'tag' | 'attribute'
function getMDNMDDescription (line 4) | async function getMDNMDDescription(name: string, type: PropertyType) {
FILE: samples/svg/build/postprocess.ts
function transform (line 7) | function transform(entry : any) {
FILE: samples/svg/build/svg-spec.ts
constant DEFINITION_PATH (line 4) | const DEFINITION_PATH = path.resolve(__dirname, '../raw-data/definitions...
type Reference (line 8) | interface Reference {
type HTMLElement (line 13) | interface HTMLElement {
type HTMLAttribute (line 21) | interface HTMLAttribute {
type HTMLAttributeCategory (line 27) | interface HTMLAttributeCategory {
type CSSProperty (line 33) | interface CSSProperty {
type CSSSpecProperty (line 43) | interface CSSSpecProperty {
type CSSPropertyValue (line 48) | interface CSSPropertyValue {
function handleHref (line 59) | function handleHref(href: string) {
function parseStringList (line 63) | function parseStringList(str: string) {
function getSVGSpec (line 68) | function getSVGSpec() {
FILE: samples/svg/build/util.ts
function sleep (line 1) | function sleep(ms: number) {
function toCompatString (line 18) | function toCompatString(bcdProperty: any) :string[] {
function isSupportedInAllBrowsers (line 62) | function isSupportedInAllBrowsers(bcdProperty: any) {
function supportToShortCompatString (line 115) | function supportToShortCompatString(support: any, browserAbbrev: any) {
function isSupported (line 134) | function isSupported(support: any) {
FILE: samples/webcomponents/src/components/my-component/main.js
method constructor (line 4) | constructor() {
FILE: web-data/css/add-atrule-descriptors.mjs
function addAtRuleDescriptors (line 4) | async function addAtRuleDescriptors(atDirectives) {
function addMediaQueryAtRuleDescriptors (line 17) | async function addMediaQueryAtRuleDescriptors(atDirective) {
FILE: web-data/css/chromestatus/applyRelevance.mjs
function applyRelevance (line 8) | function applyRelevance(properties) {
FILE: web-data/css/chromestatus/updateRelevance.mjs
function main (line 14) | async function main() {
FILE: web-data/css/generateData.mjs
function clone (line 221) | function clone(obj) {
function getProperties (line 229) | function getProperties(obj) {
function getValues (line 237) | function getValues(valArr, restriction, ruleName) {
function toSource (line 305) | function toSource(object, keyName) {
function process (line 335) | async function process() {
function processEntry (line 388) | function processEntry(entry) {
function convertEntry (line 436) | function convertEntry(entry) {
function expandEntryStatus (line 481) | function expandEntryStatus(status) {
FILE: web-data/css/mdn/mdn-browser-compat-data-importer.mjs
function addBrowserCompatDataToProperties (line 8) | function addBrowserCompatDataToProperties(atdirectives, pseudoclasses, p...
function addCompatData (line 45) | function addCompatData(item, namespace, featureName, subField) {
function addMDNReferences (line 67) | function addMDNReferences(atdirectives, pseudoclasses, pseudoelements, p...
function addBCDToBrowsers (line 124) | function addBCDToBrowsers(item, matchingBCDItem) {
function toCompatString (line 138) | function toCompatString(bcdProperty) {
function supportToShortCompatString (line 177) | function supportToShortCompatString(support, browserAbbrev) {
function isSupported (line 198) | function isSupported(support) {
FILE: web-data/css/mdn/mdn-data-importer.mjs
function addMDNProperties (line 24) | async function addMDNProperties(vscProperties) {
function extractMDNProperties (line 122) | function extractMDNProperties(atRule, mdnEntry, mdCompatEntry) {
function getValuesFromSytax (line 131) | function getValuesFromSytax(syntax) {
function abbreviateStatus (line 142) | function abbreviateStatus(mdnEntry, mdnCompatEntry) {
FILE: web-data/css/mdn/mdn-data-selector-importer.mjs
function addMDNPseudoElements (line 13) | async function addMDNPseudoElements(vscPseudoElements) {
function addMDNPseudoSelectors (line 63) | async function addMDNPseudoSelectors(vscPseudoClasses) {
function addMDNAtDirectives (line 107) | async function addMDNAtDirectives(atDirectives) {
FILE: web-data/css/mdn/mdn-documentation.mjs
function extractFirstSentence (line 16) | function extractFirstSentence(content) {
function fetchDocFromMDN (line 40) | async function fetchDocFromMDN(prop, atRuleName) {
FILE: web-data/css/utils.mjs
function download (line 9) | function download(source) {
FILE: web-data/html/generateData.mjs
function getFeatureId (line 22) | function getFeatureId(compat) {
function getBrowserCompatString (line 39) | function getBrowserCompatString(support) {
Condensed preview — 68 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (4,029K chars).
[
{
"path": ".github/CONTRIBUTING.md",
"chars": 424,
"preview": "# 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 `gen"
},
{
"path": ".gitignore",
"chars": 914,
"preview": "# 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# Directo"
},
{
"path": ".vscode/launch.json",
"chars": 535,
"preview": "{\n // Use IntelliSense to learn about possible attributes.\n // Hover to view descriptions of existing attributes.\n"
},
{
"path": ".vscode/settings.json",
"chars": 262,
"preview": "{\n \"git.branchProtection\": [\n \"main\"\n ],\n \"git.branchProtectionPrompt\": \"alwaysCommitToNewBranch\",\n \""
},
{
"path": "CODE_OF_CONDUCT.md",
"chars": 453,
"preview": "# Microsoft Open Source Code of Conduct\r\n\r\nThis project has adopted the [Microsoft Open Source Code of Conduct](https://"
},
{
"path": "LICENSE",
"chars": 1162,
"preview": " MIT License\r\n\r\n Copyright (c) Microsoft Corporation.\r\n\r\n Permission is hereby granted, free of charge, to any "
},
{
"path": "README.md",
"chars": 6708,
"preview": "<p>\r\n <h2 align=\"center\">VS Code Custom Data</h2>\r\n Documentation, sample and data for using VS Code's HTML/CSS custom"
},
{
"path": "SECURITY.md",
"chars": 2414,
"preview": "<!-- BEGIN MICROSOFT SECURITY.MD V0.0.1 BLOCK -->\r\n\r\n## Security\r\n\r\nMicrosoft takes the security of our software product"
},
{
"path": "build/pipeline.yml",
"chars": 763,
"preview": "name: $(Date:yyyyMMdd)$(Rev:.r)\n\ntrigger:\n batch: true\n branches:\n include:\n - main\npr: none\n\nresources:\n rep"
},
{
"path": "samples/helloworld/.vscode/settings.json",
"chars": 96,
"preview": "{\n \"html.customData\": [\"./html.html-data.json\"],\n \"css.customData\": [\"./css.css-data.json\"]\n}\n"
},
{
"path": "samples/helloworld/README.md",
"chars": 742,
"preview": "# Custom Data for HTML/CSS support in VS Code\n\nThis demonstrates Custom HTML/CSS data support for VS Code.\n\nSee https://"
},
{
"path": "samples/helloworld/css.css-data.json",
"chars": 481,
"preview": "{\n \"version\": 1.1,\n \"properties\": [{\n \"name\": \"my-size\",\n \"description\": \"Compiles down to `width` and `height`."
},
{
"path": "samples/helloworld/html.html-data.json",
"chars": 499,
"preview": "{\n \"version\": 1.1,\n \"tags\": [\n {\n \"name\": \"my-button\",\n \"description\": \"My button. You should use it as i"
},
{
"path": "samples/helloworld/test.css",
"chars": 28,
"preview": ":my-link {\n my-size: 4px;\n}"
},
{
"path": "samples/helloworld/test.html",
"chars": 36,
"preview": "<my-button type=\"alert\"></my-button>"
},
{
"path": "samples/svg/.gitignore",
"chars": 39,
"preview": "dist\nnode_modules\n.vscode-test/\n*.vsix\n"
},
{
"path": "samples/svg/.vscode/launch.json",
"chars": 520,
"preview": "{\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\": \"laun"
},
{
"path": "samples/svg/.vscode/settings.json",
"chars": 106,
"preview": "{\n \"html.customData\": [\"./data/svg.html-data.json\"],\n \"css.customData\": [\"./data/svg.css-data.json\"],\n}\n"
},
{
"path": "samples/svg/.vscode/tasks.json",
"chars": 365,
"preview": "// See https://go.microsoft.com/fwlink/?LinkId=733558\n// for the documentation about the tasks.json format\n{\n\t\"version\":"
},
{
"path": "samples/svg/README.md",
"chars": 1219,
"preview": "# SVG Sample\n\nSVG support in HTML/CSS files using plain JSON files.\n\n- HTML support: https://github.com/Microsoft/vscode"
},
{
"path": "samples/svg/build/index.ts",
"chars": 4323,
"preview": "import { getSVGSpec, HTMLElement, HTMLAttribute, CSSProperty } from './svg-spec'\nimport { getMDNMDDescription } from './"
},
{
"path": "samples/svg/build/mdn-bcd.ts",
"chars": 1384,
"preview": "const bcd = require('@mdn/browser-compat-data')\n\nimport * as fs from 'fs'\nimport * as path from 'path'\nimport { CSSPrope"
},
{
"path": "samples/svg/build/mdn-data.ts",
"chars": 1868,
"preview": "\nconst mdnData = require('mdn-data');\nconst bcdData = require('@mdn/browser-compat-data')\n\nimport { CSSProperty, CSSSpec"
},
{
"path": "samples/svg/build/mdn-description.ts",
"chars": 272,
"preview": "\nexport type PropertyType = 'tag' | 'attribute'\n\nexport async function getMDNMDDescription(name: string, type: PropertyT"
},
{
"path": "samples/svg/build/postprocess.ts",
"chars": 1074,
"preview": "import * as fs from 'fs'\nimport * as path from 'path'\n\nconst htmlData = require(path.resolve(__dirname, '../raw-data/svg"
},
{
"path": "samples/svg/build/svg-spec.ts",
"chars": 4338,
"preview": "import * as path from 'path'\nimport * as fs from 'fs'\n\nconst DEFINITION_PATH = path.resolve(__dirname, '../raw-data/defi"
},
{
"path": "samples/svg/build/util.ts",
"chars": 4166,
"preview": "export function sleep(ms: number) {\n\treturn new Promise<void>(resolve => {\n\t\tsetTimeout(() => {\n\t\t\tresolve()\n\t\t}, ms)\n\t}"
},
{
"path": "samples/svg/data/svg.css-data.json",
"chars": 137752,
"preview": "{\n \"version\": 1.1,\n \"properties\": [\n {\n \"name\": \"alignment-baseline\",\n \"references\": [\n {\n "
},
{
"path": "samples/svg/data/svg.html-data.json",
"chars": 49712,
"preview": "{\n \"version\": 1.1,\n \"tags\": [\n {\n \"name\": \"a\",\n \"attributes\": [\n {\n \"name\": \"href\",\n "
},
{
"path": "samples/svg/package.json",
"chars": 1043,
"preview": "{\n \"name\": \"svg\",\n \"displayName\": \"svg\",\n \"description\": \"svg\",\n \"version\": \"0.1.0\",\n \"publisher\": \"octref\",\n \"rep"
},
{
"path": "samples/svg/raw-data/definitions.xml",
"chars": 87114,
"preview": "<!-- Retrieved from https://raw.githubusercontent.com/w3c/svgwg/master/master/definitions.xml on 02/12/2019 -->\n\n<defini"
},
{
"path": "samples/svg/raw-data/svg-css-contribution.json",
"chars": 64516,
"preview": "{\n \"version\": 1.1,\n \"properties\": [\n {\n \"name\": \"alignment-baseline\",\n \"references\": [\n {\n "
},
{
"path": "samples/svg/raw-data/svg-html-contribution.json",
"chars": 49712,
"preview": "{\n \"version\": 1.1,\n \"tags\": [\n {\n \"name\": \"a\",\n \"attributes\": [\n {\n \"name\": \"href\",\n "
},
{
"path": "samples/svg/test.css",
"chars": 19,
"preview": ".foo {\n baseline\n}"
},
{
"path": "samples/svg/test.html",
"chars": 4,
"preview": "<lin"
},
{
"path": "samples/svg/tsconfig.json",
"chars": 230,
"preview": "{\n\t\"compilerOptions\": {\n\t\t\"module\": \"commonjs\",\n\t\t\"target\": \"es2020\",\n\t\t\"lib\": [\"es2020\", \"dom\"],\n\t\t\"outDir\": \"dist\",\n\t\t"
},
{
"path": "samples/webcomponents/.vscode/settings.json",
"chars": 146,
"preview": "{\n \"html.customData\": [\n \"./src/web-components.html-data.json\",\n \"./node_modules/@github/time-elements/web-compon"
},
{
"path": "samples/webcomponents/README.md",
"chars": 3431,
"preview": "# Web Component Custom Data Sample\n\nThis sample demonstrates how you can use VS Code's [HTML / CSS Custom Data](https://"
},
{
"path": "samples/webcomponents/index.html",
"chars": 981,
"preview": "<head>\n <script src=\"./src/components/my-component/main.js\" defer></script>\n <script src=\"./node_modules/@github/time-"
},
{
"path": "samples/webcomponents/src/components/my-component/docs.md",
"chars": 220,
"preview": "# My Component Docs\n\nUse it like this!\n\n```html\n<my-component type=\"text\"></my-component>\n<my-component type=\"color\" col"
},
{
"path": "samples/webcomponents/src/components/my-component/main.js",
"chars": 461,
"preview": "customElements.define(\n\t'my-component',\n\tclass extends HTMLElement {\n\t\tconstructor() {\n\t\t\tsuper();\n\n\t\t\tconst typeValue ="
},
{
"path": "samples/webcomponents/src/web-components.html-data.json",
"chars": 1175,
"preview": "{\n \"version\": 1.1,\n \"tags\": [\n {\n \"name\": \"my-component\",\n \"description\": \"My custom component. Here is i"
},
{
"path": "web-data/CHANGELOG.md",
"chars": 387,
"preview": "# Changelog\n\n### 0.4.0 | 2022-06-05\n\n- Add `void` attribute for html data. Describes if a tag is a void tag (does not ne"
},
{
"path": "web-data/LICENSE.md",
"chars": 1162,
"preview": " MIT License\r\n\r\n Copyright (c) Microsoft Corporation.\r\n\r\n Permission is hereby granted, free of charge, to any "
},
{
"path": "web-data/README.md",
"chars": 784,
"preview": "## VS Code Web Custom Data\n\nThis repository pulls data from multiple channels and massage them into the Custom Data Form"
},
{
"path": "web-data/css/add-atrule-descriptors.mjs",
"chars": 1614,
"preview": "import { listAll } from '@webref/css'\nimport { definitionSyntax } from 'css-tree'\n\nexport async function addAtRuleDescri"
},
{
"path": "web-data/css/chromestatus/applyRelevance.mjs",
"chars": 953,
"preview": "/*---------------------------------------------------------------------------------------------\n * Copyright (c) Micros"
},
{
"path": "web-data/css/chromestatus/attributeRelevance.mjs",
"chars": 52143,
"preview": "export default [\n\t{\n\t\t\"name\": \"width\",\n\t\t\"relevance\": 92\n\t},\n\t{\n\t\t\"name\": \"display\",\n\t\t\"relevance\": 92\n\t},\n\t{\n\t\t\"name\": "
},
{
"path": "web-data/css/chromestatus/updateRelevance.mjs",
"chars": 1013,
"preview": "/*---------------------------------------------------------------------------------------------\n * Copyright (c) Micros"
},
{
"path": "web-data/css/css-schema.json",
"chars": 1067616,
"preview": "{\n \"css\": {\n \"atDirectives\": {\n \"entry\": [\n {\n \"$\": {\n \"name\": \"@bottom-center\",\n "
},
{
"path": "web-data/css/generateData.mjs",
"chars": 14674,
"preview": "/*---------------------------------------------------------------------------------------------\n * Copyright (c) Micros"
},
{
"path": "web-data/css/mdn/mdn-browser-compat-data-importer.mjs",
"chars": 6372,
"preview": "/*---------------------------------------------------------------------------------------------\n * Copyright (c) Micros"
},
{
"path": "web-data/css/mdn/mdn-data-importer.mjs",
"chars": 5697,
"preview": "/*---------------------------------------------------------------------------------------------\n * Copyright (c) Micros"
},
{
"path": "web-data/css/mdn/mdn-data-selector-importer.mjs",
"chars": 5710,
"preview": "/*---------------------------------------------------------------------------------------------\n * Copyright (c) Micros"
},
{
"path": "web-data/css/mdn/mdn-documentation.mjs",
"chars": 87563,
"preview": "/*---------------------------------------------------------------------------------------------\n * Copyright (c) Micros"
},
{
"path": "web-data/css/utils.mjs",
"chars": 881,
"preview": "/*---------------------------------------------------------------------------------------------\n * Copyright (c) Micros"
},
{
"path": "web-data/data/browsers.css-data.json",
"chars": 1224165,
"preview": "{\n \"version\": 1.1,\n \"properties\": [\n {\n \"name\": \"additive-symbols\",\n \"browsers\": [\n \"FF33\"\n ]"
},
{
"path": "web-data/data/browsers.html-data.json",
"chars": 457423,
"preview": "{\n \"version\": 1.1,\n \"tags\": [\n {\n \"name\": \"html\",\n \"description\": {\n \"kind\": \"markdown\",\n \""
},
{
"path": "web-data/html/ariaData.json",
"chars": 2270,
"preview": "[\n {\n \"name\": \"aria-activedescendant\"\n },\n {\n \"name\": \"aria-atomic\",\n \"valueSet\": \"b\"\n },\n {\n \"name\": \""
},
{
"path": "web-data/html/ariaSpec.json",
"chars": 13707,
"preview": "[\n {\n \"name\": \"aria-activedescendant\",\n \"description\": \"Identifies the currently active element when DOM focus is"
},
{
"path": "web-data/html/generateData.mjs",
"chars": 7563,
"preview": "/*---------------------------------------------------------------------------------------------\n * Copyright (c) Micros"
},
{
"path": "web-data/html/htmlEvents.json",
"chars": 23525,
"preview": "[\n {\n \"name\": \"onabort\",\n \"description\": \"The loading of a resource has been aborted.\"\n },\n {\n \"name\": \"onab"
},
{
"path": "web-data/html/htmlGlobalAttributes.json",
"chars": 13431,
"preview": "[\n {\n \"name\": \"accesskey\",\n \"description\": \"Provides a hint for generating a keyboard shortcut for the current el"
},
{
"path": "web-data/html/htmlTags.json",
"chars": 40612,
"preview": "[\n {\n \"name\": \"html\",\n \"description\": \"The html element represents the root of an HTML document.\",\n \"attribute"
},
{
"path": "web-data/html/mdnTagDescriptions.json",
"chars": 205876,
"preview": "[\n {\n \"name\": \"a\",\n \"description\": \"The **HTML `<a>` element** (or _anchor_ element) creates a hyperlink to other"
},
{
"path": "web-data/html/oldEvents.json",
"chars": 1931,
"preview": "[\n { \"name\": \"onabort\" },\n { \"name\": \"onblur\" },\n { \"name\": \"oncanplay\" },\n { \"name\": \"oncanplaythrough\" },\n { \"nam"
},
{
"path": "web-data/html/valueSets.json",
"chars": 20174,
"preview": "[\n {\n \"name\": \"b\",\n \"values\": [\n {\n \"name\": \"true\"\n },\n {\n \"name\": \"false\"\n }\n "
},
{
"path": "web-data/package.json",
"chars": 743,
"preview": "{\n \"name\": \"@vscode/web-custom-data\",\n \"version\": \"0.6.3\",\n \"license\": \"MIT\",\n \"author\": \"Visual Studio Code Team\",\n"
}
]
About this extraction
This page contains the full source code of the microsoft/vscode-custom-data GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 68 files (3.5 MB), approximately 925.7k tokens, and a symbol index with 65 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.