Blitz - WPT: text-shadow-sideways-001.html

wpt / css / css-writing-modes / text-shadow-sideways-001.html

/css/css-writing-modes/text-shadow-sideways-001.html

<!DOCTYPE html>
<title>Sideways Inline Layout: Text Decoration</title>
<meta charset=utf-8>
<link rel="help" href="https://www.w3.org/TR/css-writing-modes-4/#block-flow">
<link rel="help" href="https://www.w3.org/TR/CSS2/text.html#lining-striking-props">
<link rel="help" href="https://www.w3.org/TR/css-text-decor-3/#text-shadow-property">

<link rel="match" href="text-shadow-sideways-001-ref.html">

<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
<style>
body > div {
  /* styling */
  border: solid gray;
  font: 30px/1 Ahem;
  color: silver;
  float: left;
  margin: 8px;

  /* test */
  text-decoration: underline;
  text-decoration-color: orange;
  text-decoration-thickness: 4px;
  text-shadow: 2px 4px aqua;
}
.lr {
  writing-mode: sideways-lr;
}
.rl {
  writing-mode: sideways-rl;
}
</style>

<div class=lr>Ap Éx</div>

<div class=rl>Ap Éx</div>

/css/css-writing-modes/text-shadow-sideways-001-ref.html

<!DOCTYPE html>
<title>Reference for Sideways Inline Layout: Text Decoration</title>
<meta charset=utf-8>
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
<style>
body > div {
  /* styling */
  border: solid gray;
  font: 30px/1 Ahem;
  color: silver;
  float: left;
  margin: 8px;

  /* test */
  text-decoration: underline;
  text-decoration-color: orange;
  text-decoration-thickness: 14px;

  /* reference hacking */
  width: 1em;
  height: 5em;
  white-space: nowrap;
}
div > div {
  /* compensate for WebKit propagation bug */
  text-decoration-thickness: 4px;
}
.lr > div {
  text-shadow: -4px 2px aqua;
  transform: rotate(-90deg) translateX(-4em);
}
.rl > div {
  text-shadow: 4px -2px aqua;
  transform: rotate(90deg);
}
</style>

<div class=lr><div>Ap Éx</div></div>

<div class=rl><div>Ap Éx</div></div>