The text-rendering attribute gives hint about what contracts should be made while rendering text. It has an effect only on the text element.
Syntax:
text-renderring = auto | optimizeLegibility |
geometricPrecision | optimizeSpeed
Attribute Values: The text-rendering attribute accepts the values mentioned above and described below:
- auto: It shows that the user agent shall make appropriate contracts to balance geometric precision, legibility, and speed.
- optimizeSpeed: It shows that the user agent shall focus on rendering speed over geometric precision and legibility.
- optimizeLegibility: It tells that the user agent must focus on legibility over geometric precision and rendering speed.
- geometricPrecision: It shows that the user agent shall focus on geometric precision over rendering speed and legibility.
Example 1: Below is the example that illustrated the use of the text-rendering attribute
<!DOCTYPE html>
<html>
<body>
<h1 style="color:green;
font-size:50px;
text-align:center;">
GeeksforGeeks
</h1>
<svg viewBox="0 0 140 40"
xmlns="http://www.w3.org/2000/svg">
<text y="15" text-rendering
="geometricPrecision">
Geometric precis
</text>
</svg>
</body>
</html>
Output:
Example 2: Below is the example that illustrated the use of the text-rendering attribute
<!DOCTYPE html>
<html>
<body>
<h1 style="color: green;
font-size: 50px;
text-align: center;">
GeeksforGeeks
</h1>
<svg viewBox="0 0 140 40"
xmlns="http://www.w3.org/2000/svg">
<text y="15" text-rendering
="optimizeLegibility">
Optimized legibility
</text>
</svg>
</body>
</html>
Output:
