Skip to content

Commit d92ee71

Browse files
dletoreygithub-actions[bot]dipikabh
authored
40776 text autospace (#40912)
* created the text-autospace page * added text-autospace to css text page * added text-autospace to see also of text-spacing-trim * updated see also and added values * added values definitions and example * Update files/en-us/web/css/text-autospace/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Update files/en-us/web/css/text-autospace/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Update files/en-us/web/css/text-autospace/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Update files/en-us/web/css/text-autospace/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Update files/en-us/web/css/text-spacing-trim/index.md Co-authored-by: Dipika Bhattacharya <dipika@foss-community.org> * Update files/en-us/web/css/text-autospace/index.md Co-authored-by: Dipika Bhattacharya <dipika@foss-community.org> * removed experimental inline macro * added <autospace> and reordered autospace values * Update files/en-us/web/css/text-autospace/index.md Co-authored-by: Dipika Bhattacharya <dipika@foss-community.org> * Update files/en-us/web/css/text-autospace/index.md Co-authored-by: Dipika Bhattacharya <dipika@foss-community.org> * Update files/en-us/web/css/text-autospace/index.md Co-authored-by: Dipika Bhattacharya <dipika@foss-community.org> * Update files/en-us/web/css/text-autospace/index.md Co-authored-by: Dipika Bhattacharya <dipika@foss-community.org> * Update files/en-us/web/css/text-autospace/index.md Co-authored-by: Dipika Bhattacharya <dipika@foss-community.org> * Update files/en-us/web/css/text-autospace/index.md Co-authored-by: Dipika Bhattacharya <dipika@foss-community.org> * Update files/en-us/web/css/text-autospace/index.md Co-authored-by: Dipika Bhattacharya <dipika@foss-community.org> * Update files/en-us/web/css/text-autospace/index.md Co-authored-by: Dipika Bhattacharya <dipika@foss-community.org> * Update files/en-us/web/css/text-autospace/index.md Co-authored-by: Dipika Bhattacharya <dipika@foss-community.org> * updated the html code block * reordered syntax to match the spec and added extra syntax options for multiple values * added note about insert * updated the description of no-autospace value * Update files/en-us/web/css/text-autospace/index.md Co-authored-by: Dipika Bhattacharya <dipika@foss-community.org> * added indentation for values and corrected the syntax examples --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Dipika Bhattacharya <dipika@foss-community.org>
1 parent 616b1da commit d92ee71

3 files changed

Lines changed: 182 additions & 1 deletion

File tree

‎files/en-us/web/css/css_text/index.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ The **CSS text** module defines how to perform text manipulation, like line brea
2626
- {{cssxref("text-align-last")}}
2727
- {{cssxref("text-indent")}}
2828
- {{cssxref("text-justify")}}
29+
- {{cssxref("text-autospace")}}
2930
- {{cssxref("text-spacing-trim")}} {{Experimental_Inline}}
3031
- {{cssxref("text-transform")}}
3132
- {{cssxref("text-wrap")}}

‎files/en-us/web/css/text-autospace/index.md‎

Lines changed: 179 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,179 @@
1+
---
2+
title: text-autospace
3+
slug: Web/CSS/text-autospace
4+
page-type: css-property
5+
browser-compat: css.properties.text-autospace
6+
sidebar: cssref
7+
---
8+
9+
The **`text-autospace`** [CSS](/en-US/docs/Web/CSS) property allows you to specify the space applied between Chinese/Japanese/Korean (CJK) and non-CJK characters.
10+
11+
## Syntax
12+
13+
```css
14+
text-autospace: normal;
15+
text-autospace: no-autospace;
16+
text-autospace: ideograph-alpha;
17+
text-autospace: ideograph-numeric;
18+
text-autospace: punctuation;
19+
text-autospace: insert;
20+
text-autospace: replace;
21+
text-autospace: ideograph-alpha ideograph-numeric punctuation;
22+
text-autospace: ideograph-alpha ideograph-numeric;
23+
text-autospace: ideograph-alpha ideograph-numeric insert;
24+
text-autospace: auto;
25+
26+
/* Global values */
27+
text-autospace: inherit;
28+
text-autospace: initial;
29+
text-autospace: revert;
30+
text-autospace: revert-layer;
31+
text-autospace: unset;
32+
```
33+
34+
### Values
35+
36+
- `normal`
37+
- : Creates the default behavior to automatically apply spacing between CJK and non-CJK characters and around punctuation. This value has the same effect as applying both [`ideograph-alpha`](#ideograph-alpha) and [`ideograph-numeric`](#ideograph-numeric).
38+
- `<autospace>`
39+
- : Provides more control over spacing behaviors. It accepts:
40+
- the keyword `no-autospace`, or
41+
- a combination of one or more of `ideograph-alpha`, `ideograph-numeric`, and `punctuation`, optionally followed by `insert` or `replace`.
42+
- `no-autospace`
43+
- : Disables automatic spacing between CJK and non-CJK characters.
44+
- `ideograph-alpha`
45+
- : Adds spacing only between ideographic characters (such as Katakana and Han) and non-ideographic letters (such as Latin). It does not add spacing between ideographic characters and non-ideographic numbers.
46+
- `ideograph-numeric`
47+
- : Adds spacing only between ideographic characters (such as Katakana and Han) and non-ideographic numbers (such as Latin). It does not add spacing between ideographic characters and non-ideographic letters.
48+
- `punctuation`
49+
- : Adds non-breaking spacing around punctuation as required by language-specific typographic conventions.
50+
- `insert`
51+
- : Adds the specified spacing only if there are no existing spaces between the ideographic and non-ideographic scripts.
52+
- `replace`
53+
- : Replaces existing spacing (such as [U+0020](/en-US/docs/Glossary/Whitespace)) between ideographic and non-ideographic characters with the specified spacing.
54+
- `auto`
55+
- : Lets the browser choose typographically appropriate spacing. The spacing may vary across browsers and platforms.
56+
57+
> [!NOTE]
58+
> If neither `insert` nor `replace` are specified, the behavior is the same as `insert`.
59+
60+
> [!NOTE]
61+
> This property is additive with the {{CSSXRef("word-spacing")}} and {{CSSXRef("letter-spacing")}} properties. The amount of spacing contributed by the `letter-spacing` setting is added to the spacing created by `text-autospace`. The same applies to `word-spacing`.
62+
63+
## Formal definition
64+
65+
{{CSSInfo}}
66+
67+
## Formal syntax
68+
69+
{{csssyntax}}
70+
71+
## Examples
72+
73+
This example shows the difference between various values of `text-autospace`. Try selecting a value from the drop-down box to see how it affects the spacing in the text.
74+
75+
```html hidden
76+
<form>
77+
<label for="autospace">Choose value for <code>text-autospace:</code></label>
78+
<select name="autospace" id="autospace">
79+
<option selected value="no-autospace">no-autospace</option>
80+
<option value="normal">normal</option>
81+
<option value="ideograph-alpha">ideograph-alpha</option>
82+
<option value="ideograph-numeric">ideograph-numeric</option>
83+
</select>
84+
</form>
85+
<div class="unsupported">
86+
<code>text-autospace</code> is not supported in your browser.
87+
</div>
88+
```
89+
90+
```html
91+
<main>
92+
<figure class="no-autospace">
93+
<figcaption>
94+
<code>
95+
text-autospace: <span id="autospace-value">no-autospace</span>;
96+
</code>
97+
</figcaption>
98+
<div>
99+
<p>HTML超文本标记语言</p>
100+
<p>42四十二</p>
101+
</div>
102+
</figure>
103+
</main>
104+
```
105+
106+
```css
107+
.no-autospace {
108+
text-autospace: no-autospace;
109+
}
110+
.auto {
111+
text-autospace: auto;
112+
}
113+
.normal {
114+
text-autospace: normal;
115+
}
116+
.ideograph-alpha {
117+
text-autospace: ideograph-alpha;
118+
}
119+
.ideograph-numeric {
120+
text-autospace: ideograph-numeric;
121+
}
122+
```
123+
124+
```css hidden
125+
figure {
126+
margin: 1rem;
127+
div {
128+
font-size: 2rem;
129+
padding: 1rem;
130+
font-family: sans-serif;
131+
border: tomato solid 1px;
132+
}
133+
p {
134+
margin: 0;
135+
}
136+
}
137+
main {
138+
max-width: max-content;
139+
}
140+
@supports not (text-autospace: normal) {
141+
form {
142+
display: none;
143+
}
144+
.unsupported {
145+
color: red;
146+
}
147+
}
148+
@supports (text-autospace: normal) {
149+
.unsupported {
150+
display: none;
151+
}
152+
}
153+
```
154+
155+
```js hidden
156+
const chose = document.querySelector("#autospace");
157+
const fig = document.querySelector("figure");
158+
const codeValue = document.querySelector("#autospace-value");
159+
chose.addEventListener("change", (e) => {
160+
fig.className = e.target.value;
161+
codeValue.innerText = e.target.value;
162+
});
163+
```
164+
165+
{{EmbedLiveSample("Example", 200, 200)}}
166+
167+
## Specifications
168+
169+
{{Specifications}}
170+
171+
## Browser compatibility
172+
173+
{{Compat}}
174+
175+
## See also
176+
177+
- {{cssxref('text-spacing-trim')}}
178+
- [`ic`](/en-US/docs/Web/CSS/CSS_Values_and_Units/Numeric_data_types#local_font-relative_lengths) and [`ric`](/en-US/docs/Web/CSS/CSS_Values_and_Units/Numeric_data_types#root_font-relative_lengths) units
179+
- [CSS Text](/en-US/docs/Web/CSS/CSS_text) module

‎files/en-us/web/css/text-spacing-trim/index.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -173,5 +173,6 @@ p {
173173

174174
## See also
175175

176+
- {{CSSXref("text-autospace")}}
176177
- [`ic`](/en-US/docs/Web/CSS/CSS_Values_and_Units/Numeric_data_types#local_font-relative_lengths) and [`ric`](/en-US/docs/Web/CSS/CSS_Values_and_Units/Numeric_data_types#root_font-relative_lengths) units
177-
- [CSS Text](/en-US/docs/Web/CSS/CSS_text) module
178+
- [CSS text](/en-US/docs/Web/CSS/CSS_text) module

0 commit comments

Comments
 (0)