[css-inline-3] Split text-box-edge into two properties and create a s… · w3c/csswg-drafts@7869dc6 (original) (raw)

`@@ -957,7 +957,7 @@ Logical Heights and Inter-line Spacing

957

` The [=block-axis=] sizing of a [=line box=]

958

` depends on the sizes and [[#alignment|alignment]] of its [=inline-level=] contents.

959

` This sizing is controlled by

960

the 'line-height', 'text-box-edge', 'text-box-trim', and 'inline-sizing' properties.

960

the 'line-height' and 'line-fit-edge' properties.

961

962

`

`963`

`963`

`Line Spacing: the 'line-height' property

`@@ -1035,7 +1035,7 @@ Line Spacing: the 'line-height' property

1035

` See also Issue 3118

1036

` and Issue 2165.

1037

1038

Note: When 'text-box-edge' is ''text-box-edge/leading'',

1038

Note: When 'line-fit-edge' is ''line-fit-edge/leading'',

1039

` the margins, borders, and padding of [=inline boxes=]

1040

` do not affect the line box’s height calculation.

1041

` However, they are still rendered around these boxes.

`@@ -1045,11 +1045,11 @@ Line Spacing: the 'line-height' property

1045

` potentially obscuring earlier content.

1046

1047

`

`1048`

``

`-

Inline Box Edge Metrics: the 'text-box-edge' property

1048

Text Edge Metrics: the 'line-fit-edge' property

1049

1050

1051

Name: text-box-edge

1052

1051

Name: line-fit-edge

1052

Value: leading | <>

1053

`Initial: leading

1054

`Applies to: [=inline boxes=]

1055

`Inherited: yes

`@@ -1062,37 +1062,35 @@ Inline Box Edge Metrics: the 'text-box-edge' property

1062

` and might change significantly

1063

` as design critiques and use cases are registered

1064

` and various details and interactions with other properties are worked out.

1065

Do not implement (yet).

1065

Do not ship (yet).

1066

1067

`[=Inline boxes=], whose primary purpose is to contain text,

1068

` are sized in the [=block axis=] based on their font metrics.

1069

The 'text-box-edge' property controls which metrics are used.

1070

-

1071

The chosen metrics are used as the basis

1069

The 'line-fit-edge' property controls which metrics are used.

1070

These chosen metrics are used as the basis

1072

1071

` for the [=layout bounds=] of the [=inline box=]

1073

(if it is not the [=root inline box=]).

1074

The 'text-box-trim' property can be used in conjunction

1075

to match the [=content edges=] to these same metrics.

1072

(if it is not the [=root inline box=]);

1073

and also, by default, are the metrics used for 'text-box-trim'.

1074

+

1075

The <> value,

1076

which identifies specific font metrics,

1077

expands to

1078

+

1079


`

``

`1080`

`+

<> = [ text | cap | ex | ideographic | ideographic-ink ] [ text | alphabetic | ideographic | ideographic-ink ]?

`

``

`1081`

`+

1076

1082

1077

1083

` The first value specifies the text [=over=] edge;

1078

1084

` the second value specifies the text [=under=] edge.

1079

1085

` If only one value is specified,

1080

1086

` both edges are assigned that same keyword if possible;

1081

else ''text-box-edge/text'' is assumed as the missing value.

1087

else ''<>/text'' is assumed as the missing value.

1082

1088

1083

1089

` ISSUE(5236): Do we need [=longhands=] or is this shorthand enough?

1084

1090

1085

Note: The ''text-box-edge/leading'' and ''text-box-edge/text'' values

1086

rely on the font [=ascent=] and [=descent=] to make sure the text fits.

1087

Other values are more likely to result in overlap or overflow

1088

caused by ascents above the specified metrics

1089

(such as for diacritics),

1090

so authors using these values need to be careful

1091

to provide sufficient spacing for the text.

1092

-

1093

1091

` Values have the following meanings:

1094

1092

1095

1093

leading

1126

1124

1127

Unless 'text-box-edge' is ''text-box-edge/leading''--

1125

ISSUE(8067): Is ''line-fit-edge/text'' a reasonable name for the ascent/descent metrics,

1126

or can we think of something better?

1127

Ditto ''line-fit-edge/leading'' and the name of the property itself.

1128

+

1129

Unless 'line-fit-edge' is ''line-fit-edge/leading''--

1128

1130

` in which case the box’s own 'line-height' is used to add spacing--

1129

1131

` the box’s margin, padding, and border also contribute

1130

1132

` to the [=layout bounds=].

1131

1133

1132

Note: Although only ''text-box-edge/leading'' applies positive [=half-leading=],

1133

in order to allow text to be set tightly,

1134

all values apply negative [=half-leading=],

1135

see [[#inline-height]].

1136

Half-leading is applied equally to both sides of the text;

1137

for more precise overlap control authors can use

1138

''text-box-edge: text'' together with negative [=margins=]

1139

on the affected text.

1134

Note: The ''line-fit-edge/leading'' and ''line-fit-edge/text'' values

1135

rely on the font [=ascent=] and [=descent=] to make sure the text fits.

1136

Other values are more likely to result in overlap or overflow

1137

caused by ascents above the specified metrics

1138

(such as for diacritics),

1139

so authors using these values need to be careful

1140

to provide sufficient spacing for the text,

1141

particularly in multi-lingual contexts.

1140

1142

1141

1143

`

`1145`

``

`-

The 'text-box-edge' property, showing values for ''text-box-edge/leading'',

`

`1146`

``

`-

''text-box-edge/cap'', and ''text-box-edge/ex''.

`

``

`1147`

`+

The 'line-fit-edge' property, showing values for ''line-fit-edge/leading'',

`

``

`1148`

`+

''line-fit-edge/cap'', and ''line-fit-edge/ex''.

`

`1147`

`1149`

` The red lines indicate the layout bounds of the inline box.

`

`1148`

`1150`

`

1150

1152

1151

1153

1152

When 'text-box-edge' is ''text-box-edge/leading'',

1154

When 'line-fit-edge' is ''line-fit-edge/leading'',

1153

1155

` vertical rhythm can be broken any time there is a change

1154

1156

` in font metrics or vertical alignment within a paragraph.

1155

1157

`@@ -1162,21 +1164,30 @@ Inline Box Edge Metrics: the 'text-box-edge' property

1162

1164

` to avoid overlap between lines.

1163

1165

1164

1166

1167

Note: Although only ''line-fit-edge/leading'' applies positive [=half-leading=],

1168

in order to allow text to be set tightly,

1169

all values apply negative [=half-leading=],

1170

see [[#inline-height]].

1171

Half-leading is applied equally to both sides of the text;

1172

for more precise overlap control authors can use

1173

''line-fit-edge: text'' together with negative [=margins=]

1174

on the affected text.

1175

+

1165

1176

`

`1166`

`1177`

`Calculating the Logical Height Contributions (“Layout Bounds”) of Inline Boxes

1167

1178

1168

1179

` The contribution of an [=inline box=] to the [=logical height=] of its [=line box=],

1169

1180

` here referred to as its layout bounds,

1170

1181

` is always calculated with respect to its own text metrics,

1171

1182

` as described below,

1172

and is controlled by 'text-box-edge' and 'line-height'.

1183

and is controlled by 'line-fit-edge' and 'line-height'.

1173

1184

` The sizes and positions of child boxes do not influence

1174

1185

` its [=layout bounds=]

1175

1186

` (nor its own [=logical height=], for that matter,

1176

1187

` see 'inline-sizing').

1177

1188

1178

1189

` Note: The [=layout bounds=] need not correspond

1179

to the box’s edges.

1190

to the box’s [=box/edges=].

1180

1191

1181

1192

` To find the [=layout bounds=] of an [=inline box=],

1182

1193

` the UA must first align

`@@ -1191,13 +1202,13 @@ Calculating the Logical Height Contributions (“Layout Bounds”) of Inline Box

1191

1202

` For each glyph (including the “strut”),

1192

1203

`A represents its ascent above the [=baseline=];

1193

1204

`D represents its descent below.

1194

Unless 'text-box-edge' specifies a different metric to use,

1205

Unless 'line-fit-edge' specifies a different metric to use,

1195

1206

`A refers to the [=ascent metric=]

1196

1207

` (for the given font at its given size)

1197

1208

` and D to the [=descent metric=],

1198

1209

` each adjusted to account for the [=dominant baseline=]’s offset from zero.

1199

1210

` If 'line-height' computes to ''line-height/normal''

1200

and either 'text-box-edge' is ''text-box-edge/leading''

1211

and either 'line-fit-edge' is ''line-fit-edge/leading''

1201

1212

` or this is the [=root inline box=],

1202

1213

` the font’s [=line gap metric=]

1203

1214

` may also be incorporated into A and D

`@@ -1225,7 +1236,7 @@ Calculating the Logical Height Contributions (“Layout Bounds”) of Inline Box

1225

1236

` giving an effective ascent above the baseline of

1226

1237

`A′ = A + L/2,

1227

1238

` and an effective descent of D′ = D + L/2.

1228

However, if 'text-box-edge' is not ''text-box-edge/leading''

1239

However, if 'line-fit-edge' is not ''text-box-edge/leading''

1229

1240

` and this is not the [=root inline box=],

1230

1241

` if the [=half-leading=] is positive, treat it as zero.

1231

1242

` The [=layout bounds=] exactly encloses

`@@ -1234,23 +1245,32 @@ Calculating the Logical Height Contributions (“Layout Bounds”) of Inline Box

1234

1245

` Note: L may be negative.

1235

1246

1236

1247

` Additionally,

1237

when 'text-box-edge' is not ''text-box-edge/leading'',

1248

when 'line-fit-edge' is not ''line-fit-edge/leading'',

1238

1249

` the [=layout bounds=] are inflated

1239

1250

` by the sum of the [=margin=], [=border=], and [=padding=]

1240

1251

` on each side.

1241

1252

` In order to allow negative [=margin=] values to have an actual effect,

1242

1253

` negative [=margins=] are also accumulated onto

1243

the layout bounds of any descendant [=inline boxes=]

1254

the [=layout bounds=] of any descendant [=inline boxes=]

1244

1255

` participating in the same [=inline formatting context=].

1245

1256

1246

1257

` In Quirks Mode [[!QUIRKS]],

1247

1258

` any [=inline box=] [=box fragment|fragment=]

1248

1259

` that has zero borders and padding and

1249

1260

` that does not directly contain text or preserved white space [[!CSS-TEXT-3]]

1250

is ignored when sizing the line box.

1261

is ignored when sizing the [=line box=].

1251

1262

1252

`

`1253`

``

`-

Half-Leading Control: the 'text-box-trim' property

1263

`

``

`1264`

`+

Trimming Leading Over/Under Text

1265

+

1266

ISSUE: This is a draft of a proposal,

1267

and may change significantly

1268

as design critiques and use cases are registered.

1269

Values and property names may be added, dropped, and/or renamed,

1270

and the overall syntax or behavior may change,

1271

particularly in response to authoring and robustness considerations

1272

for handling descendant boxes.

1273

Do not ship (yet).

1254

1274

1255

1275

` To ensure consistent spacing in the basic case of running text,

1256

1276

` CSS line layout introduces leading both above and below

`@@ -1264,13 +1284,13 @@ Half-Leading Control: the 'text-box-trim' property

1264

1284

` However, all this extra spacing interferes with visual alignment

1265

1285

` and with control over effective (visually-apparent) spacing.

1266

1286

1267

The 'text-box-trim' property allows trimming

1287

The 'text-box' property allows trimming

1268

1288

` this additional space above and below

1269

1289

` the first and last lines of a block,

1270

1290

` allowing more precise control over spacing around the glyphs.

1271

Moreover, by relying on font metrics rather than hard-coded lengths,

1272

it allows content to be resized, rewrapped, and rendered in a variety of fonts

1273

while maintaining that spacing.

1291

By relying on font metrics rather than hard-coded lengths,

1292

this feature allows content to be resized, rewrapped, and rendered in a variety of fonts

1293

while maintaining that precise spacing.

1274

1294

1275

1295

1276

1296

`@@ -1332,6 +1352,42 @@ Half-Leading Control: the 'text-box-trim' property

1332

1352

1333

1353

1334

1354

1355

`

``

`1356`

`+

Shorthand for Text Box Trimming: the 'text-box' property

1357

+

1358

ISSUE: This propdef table is fully expanded to evaluate and adjust the shorthand's value space.

1359

It simplifies down to <> || <>

1360

minus the ''text-box-trim/none'' and ''text-box-edge/auto'' keywords.

1361

+

1362


`

``

`1363`

`+

Name: text-box

`

``

`1364`

`+

Value: normal | [ start | end | both ] || [ text | cap | ex | ideographic | ideographic-ink ] [ text | alphabetic | ideographic | ideographic-ink ]?

`

``

`1365`

`+

Initial: normal

`

``

`1366`

`+

Applies to: [=block containers=] and [=inline boxes=]

`

``

`1367`

`+

Inherited: no

`

``

`1368`

`+

Percentages: N/A

`

``

`1369`

`+

Computed value: the specified keyword

`

``

`1370`

`+

Animation type: discrete

`

``

`1371`

`+

1372

+

1373

This property is a [=shorthand=] for setting the 'text-box-trim' and 'text-box-edge' properties

1374

in a single declaration.

1375

+

1376

If the single keyword ''text-box-edge/normal'' is specified,

1377

it sets 'text-box-trim' to ''text-box-trim/none''

1378

and 'text-box-edge' to ''text-box-edge/auto''.

1379

Otherwise, omitting the 'text-box-trim' value sets it to ''text-box-trim/both'' (not the initial value),

1380

while omitting the 'text-box-edge' value sets it to ''text-box-edge/auto'' (the initial value).

1381

+

1382

ISSUE(8067): We should rename the 'text-box-trim' values to add ''trim-*'' prefixes.

1383

This would make the shorthand clearer,

1384

and also make its value space consistent with 'text-spacing'.

1385

+

1386

ISSUE: Add examples.

1387

+

1388

`

``

`1389`

`+

Trimming Over/Under Text: the 'text-box-trim' property

1390

+

1335

1391

1336

1392

`Name: text-box-trim

1337

1393

`Value: none | start | end | both

`@@ -1343,15 +1399,6 @@ Half-Leading Control: the 'text-box-trim' property

1343

1399

`Animation type: discrete

1344

1400

1345

1401

1346

ISSUE: This is an early draft of a proposal,

1347

and is likely to change significantly

1348

as design critiques and use cases are registered.

1349

Values and property names may be added, dropped, and/or renamed,

1350

and the overall syntax or behavior may change,

1351

particularly in response to authoring and robustness considerations

1352

for handling descendant boxes.

1353

Do not implement (yet).

1354

-

1355

1402

` On [=inline boxes=],

1356

1403

` specifies whether to trim the [=content box=]

1357

1404

` to match its corresponding 'text-box-edge' metric.

`@@ -1365,12 +1412,6 @@ Half-Leading Control: the 'text-box-trim' property

1365

1412

` to the corresponding 'text-box-edge' metric

1366

1413

` to better match the box’s [=content edge=] to its text content.

1367

1414

1368

Note: Content and ink overflowing a box

1369

due to non-initial values of 'text-box-trim'

1370

is handled the same as content that would overflow the box or line box otherwise.

1371

-

1372

This property has no effect when 'text-box-edge' is ''text-box-edge/leading''.

1373

-

1374

1415

` Values have the following meanings:

1375

1416

1376

1417

`@@ -1422,6 +1463,36 @@ Half-Leading Control: the 'text-box-trim' property

1422

1463

` Note: The [=block-end=] side does not coincide with the [=line-under=] side

1423

1464

` when 'writing-mode' is ''vertical-lr''.

1424

1465

1466

Note: Content and ink overflowing a box

1467

due to non-initial values of 'text-box-trim'

1468

is handled the same as content that would overflow the box or line box otherwise.

1469

+

1470

`

``

`1471`

`+

Text Trimming Metrics: the 'text-box-edge' property

1472

+

1473


`

``

`1474`

`+

Name: text-box-edge

`

``

`1475`

`+

Value: auto | <>

`

``

`1476`

`+

Initial: auto

`

``

`1477`

`+

Applies to: [=block containers=] and [=inline boxes=]

`

``

`1478`

`+

Inherited: no

`

``

`1479`

`+

Percentages: N/A

`

``

`1480`

`+

Computed value: the specified keyword

`

``

`1481`

`+

Animation type: discrete

`

``

`1482`

`+

1483

+

1484

This property specifies the metrics to use for 'text-box-trim' effects.

1485

Values have the same meanings as for 'line-fit-edge';

1486

the auto keyword

1487

computes to the value of 'line-fit-edge',

1488

interpreting ''line-fit-edge/leading'' (the [=initial value=]) as ''line-fit-edge/text''.

1489

+

1490

Note: This property can be set together with 'text-box-trim'

1491

in the 'text-box' [=shorthand=].

1492

Unlike 'line-fit-edge', it does not inherit;

1493

however its [=initial value=] copies from 'line-fit-edge',

1494

which does inherit.

1495

+

1425

1496

`

`1426`

`1497`

`Inline Box Drawing Height: the 'inline-sizing' property

1427

1498

`@@ -1437,6 +1508,7 @@ Inline Box Drawing Height: the 'inline-sizing' property

1437

1508

1438

1509

1439

1510

` ISSUE(5189): This has a confusing name. We need a new name.

1511

Alternatively, incorporate this into 'text-box-trim'?

1440

1512

1441

1513

` This property specifies how the logical height

1442

1514

` of the content area of an inline box

`@@ -2982,6 +3054,11 @@ Changes

2982

3054

` Changes since the

2983

3055

`1 April 2023 Working Draft:

2984

3056

3057

Split 'text-box-edge' into two properties:
`

``

3058

`+

'text-box-edge' for controlling the 'text-box-trim' edge

`

``

3059

`+

and 'line-fit-edge' for controlling line box sizing.

`

``

3060

`+

(Issues 8829

`

``

3061

`+

and 8696)

`

2985

3062

`
Apply negative [=block-axis=] margins to descendants of [=inline boxes=]

2986

3063

` when calculating their [=layout bounds=]

2987

3064

` so that they can actually have the specified effect.

[css-inline-3] Split text-box-edge into two properties and create a s… · w3c/csswg-drafts@7869dc6 (original) (raw)

` 963 963 `Line Spacing: the 'line-height' property

` 1048 `` `- Inline Box Edge Metrics: the 'text-box-edge' property

` 1166 1177 `Calculating the Logical Height Contributions (“Layout Bounds”) of Inline Boxes

` 1253 `` `- Half-Leading Control: the 'text-box-trim' property

` `` 1264 `+ Trimming Leading Over/Under Text

` `` 1356 `+ Shorthand for Text Box Trimming: the 'text-box' property

` `` 1389 `+ Trimming Over/Under Text: the 'text-box-trim' property

` `` 1471 `+ Text Trimming Metrics: the 'text-box-edge' property

` 1426 1497 `Inline Box Drawing Height: the 'inline-sizing' property