You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
<p>It is sometimes convenient to replace one character with another
2342
-
without changing the source document. For example, the apostrophe
2343
-
character is easily found on keyboards, but in print it is often
2344
-
better to replace it with a quotation character. The 'text-replace'
2345
-
property offers a way to perform the replacement in the style sheet.
2346
-
2347
-
<pclass='issue'>It this something CSS should do? Some think it's OK to use CSS for non-stylistic purposes, some think this <em>is</em> is a stylistic purpose, and some think this is not stylistic and should therefore be kept outside of CSS.
2348
-
2349
-
<h3>The 'text-replace' property</h3>
2350
-
2351
-
<tableclass=propdef>
2352
-
<tr>
2353
-
<td><em>Name:</em>
2354
-
<td><dfn>text-replace</dfn>
2355
-
<tr>
2356
-
<td><em>Value:</em>
2357
-
<td> [<string> <string>]+ | none
2358
-
<tr>
2359
-
<td><em>Initial:</em>
2360
-
<td>none
2361
-
<tr>
2362
-
<td><em>Applies to:</em>
2363
-
<td>all elements
2364
-
<tr>
2365
-
<td><em>Inherited:</em>
2366
-
<td>yes <spanclass='issue'>or?</span>
2367
-
<tr>
2368
-
<td><em>Percentages:</em>
2369
-
<td>N/A
2370
-
<tr>
2371
-
<td><em>Media:</em>
2372
-
<td>visual
2373
-
<tr>
2374
-
<td><em>Computed value:</em>
2375
-
<td>as specified value
2376
-
</table>
2377
-
2378
-
<p>This property is used to replace all occurrences of a certain
2379
-
string with another string in the content of the element. The property
2380
-
accepts pairs of strings as value, in addition to the initial ''none''
2381
-
value. For each pair of strings, occurrences of the first string in
2382
-
the content will be replaced with the second string. If ''none'' is
2383
-
specified, no replacements will occur.
2384
-
2385
-
<divclass="example">
2386
-
2387
-
<p>In this example, the apostrophe character is converted to a
2388
-
quotation character.
2389
-
2390
-
<pre>
2391
-
body { text-replace: "'" "\2019" }
2392
-
</pre>
2393
-
</div>
2394
-
2395
-
<divclass="example">
2396
-
2397
-
<p>In this example, the string "--" is replaced with the em-dash character:
2398
-
2399
-
<pre>
2400
-
body { text-replace: "--" "\2014" }
2401
-
</pre>
2402
-
</div>
2403
-
2404
-
<divclass="example">
2405
-
2406
-
<p>In this example, the string "..." is replaced with the ellipsis character:
2407
-
2408
-
<pre>
2409
-
body { text-replace: "..." "\2026" }
2410
-
</pre>
2411
-
</div>
2412
-
2413
-
<divclass="example">
2414
-
<p>In this example, all references to 'Soviet Union' are replaced with 'Russia'.
2415
-
2416
-
<pre>
2417
-
body { text-replace: "Soviet Union" "Russia" }
2418
-
</pre>
2419
-
</div>
2420
-
2421
-
<p>Text replacements are applied sequentially.
2422
-
2423
-
<divclass="example">
2424
-
<p>The two rules below yield the same result. In the first rule all
2425
-
'a' characters are converted to 'b'. Subsequently, all 'b' characters
2426
-
are converted to 'c'. In the second rule, all 'a' and 'b' characters
2427
-
are converted directly to 'c'.
2428
-
2429
-
<pre>
2430
-
body { text-replace: "a" "b" "b" "c" }
2431
-
body { text-replace: "a" "c" "b" "c" }
2432
-
</pre>
2433
-
</div>
2434
-
2435
-
2436
-
<p>If text replacements are specified on two elements that have an
2437
-
ancestor-descender relationship, only the setting on the youngest
2438
-
element is applied.
2439
-
2440
-
<divclass="example">
2441
-
<p>In this example, only the second declaration has any effect on text inside the body element.
2442
-
2443
-
<pre>
2444
-
html { text-replace: "a" "b" }
2445
-
body { text-replace: "c" "d" }
2446
-
</pre>
2447
-
</div>
2448
-
2449
-
2450
-
<p>The first string in a pair must have at least one character, while
2451
-
the second may be empty.
2452
-
2453
-
<divclass="example">
2454
-
<p>In this example, all 'a' characters are removed.
2455
-
2456
-
<pre>
2457
-
body { text-replace: "a" "" }
2458
-
</pre>
2459
-
</div>
2460
-
2461
-
<p>If the first string of a pair is empty, or if an odd number of
2462
-
strings has been specified, the whole value is ignored and no text
2463
-
replacements are performed.
2464
-
2465
-
<p>This property is evaluated after the 'content' property, and before
2466
-
'text-transform'.
2467
-
2468
-
<pclass="note">This property is very powerful and must be used with
2469
-
great care. The purpose of this property is to beautify the
2470
-
presentation of text when changing the source document is
2471
-
impractical.
2472
-
2473
-
<divclass=issue>
2474
-
2475
-
<p>This property has raised some discussions. Some people think it's much powerful, other thinks it's too weak. Some think it doesn't belong in CSS at all.
2476
-
2477
-
<p>One weakness is that it is not able to perform a the commonly requested task of replacing pairs of double quotes with proper quote marks. One way of addressing this would be to add support for regular expressions. For example:
2478
-
2479
-
<divclass="example">
2480
-
<preclass=issue>
2481
-
body { text-replace: 's/"([^"]*?)"/«$1»/g' }
2482
-
</pre>
2483
-
</div>
2484
-
<!-- "-->
2485
-
2486
-
<p>Another option is to allow uneven number of strings in the value:
2487
-
2488
-
<preclass=issue>
2489
-
body { text-replace: '"' '«' '»' }
2490
-
</pre>
2491
-
2492
-
<p>In the example above, the first double quote (") would be replace by "«", the second would be replaced by "»" etc. In order for this to work, commas would have to be introduced in order to distinguish between the different sets of replacemenets:
2493
-
2494
-
<pre>
2495
-
body { text-replace: "Soviet Union" "Russia", '"' '«' '»' }
2496
-
</pre>
2497
-
<!-- "-->
2498
-
2499
-
2500
-
<p>Another approach is to select the text to be replaced in the selector:
0 commit comments