MENU


Surrounding

text-decoration(shorthand)

...text-decoration-color
: currentcolor: uses the current color for the line.
: red: makes the line red in color.

...text-decoration-line
: none: no line.
: underline: a line below.
: overline: a line above.
: line-through: a line through the middle.
: blink: blinks the line.
: underline overline line-through: 3 lines.

...text-decoration-style
: solid: a solid line.
: double: double lines.
: dotted: a dotted line.
: dashed: a dashed line.
: wavy: a wavy line.

...text-decoration-skip-ink
: none: over all glyph ascenders/descenders.
: auto: skip glyph ascenders/descenders.

...text-decoration-thickness(experimental)
: auto: chooses the thickness automatically.
: from-font: uses the font thickness.
: 2px: makes the line 2px thick.
: 50%: makes the line 50% of 1em thick.

text-underline-offset(experimental)
:1em: sets the distance of the line from the text.
:20%: sets the distance to be 0.2em.

text-underline-position
: auto: users the algorithm of the user agent.
: under: forces the line to be set below the baseline.
: right: forces the line to be on the right in vertical writing-modes.
: left under: for flexible writing-modes.

RESETRUNFULL
<!DOCTYPE html><html><head></head>
<body style="text-decoration-skip-ink: none;">
   <p style="text-decoration:overline underline blink red dotted; 
             text-decorationthickness: 5px;"> 
      The Internet is becoming the town square for the global village of tomorrow.</p>
   <p style="text-decoration:underline dashed">
      I'm very excited about having the Internet in my den.</p>
   <p style="text-decoration:underline wavy; "> The Internet is becoming the town square for the global village of tomorrow.</p>
   <p style="text-decoration:underline solid; 
             text-decoration-skip-ink: auto;"> Being able to see an activity log of where a kid has been going on the Internet is a good thing.</p>
   <p style="text-decoration:underline solid; 
             text-underline-position: under;"> Being able to see an activity log of where a kid has been going on the Internet is a good thing.</p>
</body></html>

text-emphasis(shorthand)

...text-emphasis-color
: red: sets the emphasis marks to be red.

...text-emphasis-position
: under: places the marks below.
: left over: places the marks to the left for vertical writing-modes and above for horizontal writing-modes.

...text-emphasis-style
: none: no emphasis marks/
: filled: the default mode, as opposed to 'open'.
: open: not 'filled'.
: dot:•(filled)◦(unfilled)
: circle:●(filled)○(unfilled)
: double-circle:◉(filled)◎(unfilled)
: triangle:▲(filled)△(unfilled)
: sesame: ﹅(filled)﹆(unfilled)
: '口': uses a special custom character

RESETRUNFULL
<!DOCTYPE html><html>
<body style="font-size:5vw; height:500px;">
   <p style="-webkit-text-emphasis:red open double-circle"> SUPERB</p>
   <p style="-webkit-text-emphasis:'!'">WHAT</p>
</body></html>

text-transform
:none: no forced capitalization. Default.
:capitalize:capitalize the first character of each word.
:uppercase: transforms all characters to uppercase.
:lowercase: transforms all characters to lowercase.

text-shadow
:2px 3px 4px green: displays a shadow for the text at 2px right, 3px down, 4px blur, and in green color.
When adding a text overlay, in contrast to using {position:relative;}, using a negative margin does not 'occupy' space unnecessarily.
RESETRUNFULL
<!DOCTYPE html><html><head><style>
   body{
      width:min-content;
   }
   img{
      width:30vw;
   }
   p{
      color:red;
      margin:-50vh auto;
      text-shadow: 5px 5px 5px white;
      text-transform: capitalize;
      font-size: 6vh;
      width:min-content;
   }
</style></head>
<body>
   <img src="/shared/scene.jpg"/>
   <p>see? you can still read me!</p>
</body></html>

text-rendering
: auto: let the browser decide how to optimize.
: optimizeSpeed: emphasizes rendering speed.
: optimizeLegibility: emphasizes rendering legibility.
: geometricPrecision: emphasizes geometric precision.