Skip to content

Commit c5a0ee6

Browse files
dletoreygithub-actions[bot]estelleJosh-Cenahamishwillee
authored
Css font feature values api (mdn#42835)
* added CSSFontFeatureValuesMap to GroupData.json * created the pages for cssFontFeatureValuesMap and its methods * added links to the property pages * created pages for cssFontFeatureValuesRule properties and the structure * corrected the interface for fontFamily property * corrected the variable name in the JS examples * added the values for the ValueRule properties * added the descriptions for the CSSFontFeatureValuesRule properties * added the size instance property * added CSSFontFeatureValuesMap.clear() * added the explanation of the size example * added CSSFontFeatureValuesMap.delete() * added parameter for delete * added CSSFontFeatureValuesMap.entries() * added CSSFontFeatureValuesMap.forEach() * added see also links * added CSSFontFeatureValuesMap.get() * removed extra text * added explaination of the examples * added CSSFontFeatureValuesMap.has() * added CSSFontFeatureValuesMap.keys() * added CSSFontFeatureValuesMap.values() * added CSSFontFeatureValuesMap.set() * added [Symbol.iterator] * added description to CSSFontFeatureValuesMap * Update files/en-us/web/api/cssfontfeaturevaluesmap/clear/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Update files/en-us/web/api/cssfontfeaturevaluesmap/delete/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Update files/en-us/web/api/cssfontfeaturevaluesmap/entries/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Update files/en-us/web/api/cssfontfeaturevaluesmap/keys/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Update files/en-us/web/api/cssfontfeaturevaluesmap/values/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Update files/en-us/web/api/cssfontfeaturevaluesrule/charactervariant/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Update files/en-us/web/api/cssfontfeaturevaluesrule/ornaments/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Update files/en-us/web/api/cssfontfeaturevaluesrule/annotation/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Update files/en-us/web/api/cssfontfeaturevaluesrule/styleset/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Update files/en-us/web/api/cssfontfeaturevaluesrule/stylistic/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Update files/en-us/web/api/cssfontfeaturevaluesrule/swash/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Update files/en-us/web/api/cssfontfeaturevaluesrule/charactervariant/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * made sure all the description sentences are on 1 line * fixed the example headings and added explanation to Maps * updated the return value of size * made tag name & optional value linkable * made the rul descriptions link to custom-ident & optional value * added example for CSSFontFeatureValuesMap * updated the description for CSSFontFeatureValuesMap * removed reference from iterator and added to map-like list * Update files/en-us/web/api/cssfontfeaturevaluesmap/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Update files/en-us/web/api/cssfontfeaturevaluesmap/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * moved support text to JS * Update files/en-us/web/api/cssfontfeaturevaluesmap/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Update index.md * fix some awkward wording * update CSSFontFeatureValuesRule exmaple * Update files/en-us/web/api/cssfontfeaturevaluesmap/index.md Co-authored-by: Hamish Willee <hamishwillee@gmail.com> * Update files/en-us/web/api/cssfontfeaturevaluesrule/index.md Co-authored-by: Hamish Willee <hamishwillee@gmail.com> * Update files/en-us/web/api/cssfontfeaturevaluesrule/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Update files/en-us/web/api/cssfontfeaturevaluesrule/swash/index.md Co-authored-by: Hamish Willee <hamishwillee@gmail.com> * Update files/en-us/web/api/cssfontfeaturevaluesrule/swash/index.md Co-authored-by: Hamish Willee <hamishwillee@gmail.com> * Update files/en-us/web/api/cssfontfeaturevaluesrule/index.md Co-authored-by: Hamish Willee <hamishwillee@gmail.com> * Update files/en-us/web/api/cssfontfeaturevaluesrule/index.md Co-authored-by: Hamish Willee <hamishwillee@gmail.com> * Update files/en-us/web/api/cssfontfeaturevaluesrule/swash/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * added nolint to css block * Update files/en-us/web/api/cssfontfeaturevaluesrule/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * updated the example description * Update files/en-us/web/api/cssfontfeaturevaluesrule/index.md * updated the description of CSSFontFeatureValuesMap * updated the description of CSSFontFeatureValuesRule * corrected the example class name * updated the example decsription for CSSFontFeatureValuesMap * corrected the example * expanded the example to include multiple font-feature-values * added comments inline to the code blocks for example * Add live example log format --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Estelle Weyl <estelle@weyl.org> Co-authored-by: Joshua Chen <sidachen2003@gmail.com> Co-authored-by: Hamish Willee <hamishwillee@gmail.com>
1 parent c3a6279 commit c5a0ee6

File tree

23 files changed

+1261
-19
lines changed

23 files changed

+1261
-19
lines changed
Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
---
2+
title: "CSSFontFeatureValuesMap: clear() method"
3+
short-title: clear()
4+
slug: Web/API/CSSFontFeatureValuesMap/clear
5+
page-type: web-api-instance-method
6+
browser-compat: api.CSSFontFeatureValuesMap.clear
7+
---
8+
9+
{{APIRef("CSSOM")}}
10+
11+
The **`clear()`** method of the {{domxref("CSSFontFeatureValuesMap")}} interface removes all declarations in the `CSSFontFeatureValuesMap`.
12+
13+
## Syntax
14+
15+
```js-nolint
16+
clear()
17+
```
18+
19+
### Parameters
20+
21+
None.
22+
23+
### Return value
24+
25+
None ({{jsxref("undefined")}}).
26+
27+
## Examples
28+
29+
### Basic usage
30+
31+
The following example removes all the declarations within the [`@swash`](/en-US/docs/Web/CSS/Reference/At-rules/@font-feature-values#swash) feature block. This example is using `@swash` but also works with other [feature value blocks](/en-US/docs/Web/CSS/Reference/At-rules/@font-feature-values#feature_value_blocks).
32+
33+
#### CSS
34+
35+
```css
36+
@font-feature-values "MonteCarlo" {
37+
@swash {
38+
swishy: 1;
39+
swashy: 2;
40+
}
41+
}
42+
```
43+
44+
#### JavaScript
45+
46+
```js
47+
// get the rules
48+
const myRule = document.styleSheets[0].cssRules[0];
49+
console.log(myRule.swash.size); // logs 2
50+
myRule.swash.clear();
51+
console.log(myRule.swash.size); // logs 0
52+
```
53+
54+
## Specifications
55+
56+
{{Specifications}}
57+
58+
## Browser compatibility
59+
60+
{{Compat}}
61+
62+
## See also
63+
64+
- [Map.prototype.clear()](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/clear)
Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
---
2+
title: "CSSFontFeatureValuesMap: delete() method"
3+
short-title: delete()
4+
slug: Web/API/CSSFontFeatureValuesMap/delete
5+
page-type: web-api-instance-method
6+
browser-compat: api.CSSFontFeatureValuesMap.delete
7+
---
8+
9+
{{APIRef("CSSOM")}}
10+
11+
The **`delete()`** method of the {{domxref("CSSFontFeatureValuesMap")}} interface removes the CSS declaration with the given property in the `CSSFontFeatureValuesMap`.
12+
13+
## Syntax
14+
15+
```js-nolint
16+
delete(property)
17+
```
18+
19+
### Parameters
20+
21+
- `property`
22+
- : An identifier indicating the declaration to remove.
23+
24+
### Return value
25+
26+
None ({{jsxref("undefined")}}).
27+
28+
## Examples
29+
30+
### Basic usage
31+
32+
The following example deletes the first declaration within the [`@swash`](/en-US/docs/Web/CSS/Reference/At-rules/@font-feature-values#swash) feature block. This example is using `@swash` but also works with other [feature value blocks](/en-US/docs/Web/CSS/Reference/At-rules/@font-feature-values#feature_value_blocks).
33+
34+
#### CSS
35+
36+
```css
37+
@font-feature-values "MonteCarlo" {
38+
@swash {
39+
swishy: 1;
40+
swashy: 2;
41+
}
42+
}
43+
```
44+
45+
#### JavaScript
46+
47+
```js
48+
// get the rules
49+
const myRule = document.styleSheets[0].cssRules[0];
50+
console.log(myRule.swash.has("swishy")); // logs true
51+
myRule.swash.delete("swishy");
52+
console.log(myRule.swash.has("swishy")); // logs false
53+
```
54+
55+
## Specifications
56+
57+
{{Specifications}}
58+
59+
## Browser compatibility
60+
61+
{{Compat}}
62+
63+
## See also
64+
65+
- [Map.prototype.delete()](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/delete)
Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
---
2+
title: "CSSFontFeatureValuesMap: entries() method"
3+
short-title: entries()
4+
slug: Web/API/CSSFontFeatureValuesMap/entries
5+
page-type: web-api-instance-method
6+
browser-compat: api.CSSFontFeatureValuesMap.entries
7+
---
8+
9+
{{APIRef("CSSOM")}}
10+
11+
The **`entries()`** method of {{domxref("CSSFontFeatureValuesMap")}} instances returns a new [map iterator](/en-US/docs/Web/API/CSSFontFeatureValuesMap/Symbol.iterator) object that contains the `[key, value]` pairs for each declaration in this `CSSFontFeatureValuesMap` in insertion order.
12+
13+
## Syntax
14+
15+
```js-nolint
16+
entries()
17+
```
18+
19+
### Parameters
20+
21+
None.
22+
23+
### Return value
24+
25+
A new iterable [iterator object](/en-US/docs/Web/API/CSSFontFeatureValuesMap/Symbol.iterator).
26+
27+
## Examples
28+
29+
### Basic usage
30+
31+
The following example assigns the entries to the `swashes` variable and then logs the first two values. This example is using `@swash` but also works with other [feature value blocks](/en-US/docs/Web/CSS/Reference/At-rules/@font-feature-values#feature_value_blocks).
32+
33+
#### CSS
34+
35+
```css
36+
@font-feature-values "MonteCarlo" {
37+
@swash {
38+
swishy: 1;
39+
swashy: 2;
40+
}
41+
}
42+
```
43+
44+
#### JavaScript
45+
46+
```js
47+
// get the rules
48+
const myRule = document.styleSheets[0].cssRules[0];
49+
// get the entries of swash
50+
const swashes = myRule.swash.entries();
51+
console.log(swashes.next().value); // logs ["swishy", [1]]
52+
console.log(swashes.next().value); // logs ["swashy", [2]]
53+
```
54+
55+
## Specifications
56+
57+
{{Specifications}}
58+
59+
## Browser compatibility
60+
61+
{{Compat}}
62+
63+
## See also
64+
65+
- [Map.prototype.entries()](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/entries)
Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
---
2+
title: "CSSFontFeatureValuesMap: forEach() method"
3+
short-title: forEach()
4+
slug: Web/API/CSSFontFeatureValuesMap/forEach
5+
page-type: web-api-instance-method
6+
browser-compat: api.CSSFontFeatureValuesMap.forEach
7+
---
8+
9+
{{APIRef("CSSOM")}}
10+
11+
The **`forEach()`** method of {{domxref("CSSFontFeatureValuesMap")}} instances executes a provided function once per each key/value pair in this map, in insertion order.
12+
13+
## Syntax
14+
15+
```js-nolint
16+
forEach(callbackFn)
17+
forEach(callbackFn, thisArg)
18+
```
19+
20+
### Parameters
21+
22+
- `callbackFn`
23+
- : A function to execute for each entry in the map. The function is called with the following arguments:
24+
- `value`
25+
- : Value of each iteration.
26+
- `key`
27+
- : Key of each iteration.
28+
- `map`
29+
- : The map being iterated.
30+
- `thisArg` {{optional_inline}}
31+
- : A value to use as `this` when executing `callbackFn`.
32+
33+
### Return value
34+
35+
None ({{jsxref("undefined")}}).
36+
37+
## Examples
38+
39+
### Basic usage
40+
41+
The following example logs the `key` and `value` for each entry in the `@swash` rule. This example is using `@swash` but also works with other [feature value blocks](/en-US/docs/Web/CSS/Reference/At-rules/@font-feature-values#feature_value_blocks).
42+
43+
#### CSS
44+
45+
```css
46+
@font-feature-values "MonteCarlo" {
47+
@swash {
48+
swishy: 1;
49+
swashy: 2;
50+
}
51+
}
52+
```
53+
54+
#### JavaScript
55+
56+
```js
57+
// function to be used as callback
58+
function logSwashes(value, key, map) {
59+
console.log(`('${key}') = ${value}`);
60+
}
61+
// get the rules
62+
const myRule = document.styleSheets[0].cssRules[0];
63+
myRule.swash.forEach(logSwashes);
64+
// logs:
65+
// "('swishy') = 1"
66+
// "('swashy') = 2"
67+
```
68+
69+
## Specifications
70+
71+
{{Specifications}}
72+
73+
## Browser compatibility
74+
75+
{{Compat}}
76+
77+
## See also
78+
79+
- [Map.prototype.forEach()](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/forEach)
Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
---
2+
title: "CSSFontFeatureValuesMap: get() method"
3+
short-title: get()
4+
slug: Web/API/CSSFontFeatureValuesMap/get
5+
page-type: web-api-instance-method
6+
browser-compat: api.CSSFontFeatureValuesMap.get
7+
---
8+
9+
{{APIRef("CSSOM")}}
10+
11+
The **`get()`** method of the {{domxref("CSSFontFeatureValuesMap")}} interface returns value corresponding to the key in this `CSSFontFeatureValuesMap`, or `undefined` if there is none.
12+
13+
## Syntax
14+
15+
```js-nolint
16+
get(property)
17+
```
18+
19+
### Parameters
20+
21+
- `key`
22+
- : The key of the value to return from the `CSSFontFeatureValuesMap` object.
23+
24+
### Return value
25+
26+
Returns `true` if an entry with the specified key exists in the `CSSFontFeatureValuesMap` object; otherwise `false`.
27+
28+
## Examples
29+
30+
### Basic usage
31+
32+
The following example gets the values that match the `key`s in the `@swash` rule. This example is using `@swash` but also works with other [feature value blocks](/en-US/docs/Web/CSS/Reference/At-rules/@font-feature-values#feature_value_blocks).
33+
34+
#### CSS
35+
36+
```css
37+
@font-feature-values "MonteCarlo" {
38+
@swash {
39+
swishy: 1;
40+
swashy: 2;
41+
}
42+
}
43+
```
44+
45+
#### JavaScript
46+
47+
```js
48+
// get the rules
49+
const myRule = document.styleSheets[0].cssRules[0];
50+
console.log(myRule.swash.get("swishy")); // logs [1]
51+
console.log(myRule.swash.get("swashy")); // logs [2]
52+
```
53+
54+
## Specifications
55+
56+
{{Specifications}}
57+
58+
## Browser compatibility
59+
60+
{{Compat}}
61+
62+
## See also
63+
64+
- [Map.prototype.get()](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/get)

0 commit comments

Comments
 (0)