Skip to content

Instantly share code, notes, and snippets.

@Hypnosphi

Hypnosphi/vertical headings

Last active August 29, 2015 14:05
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Hypnosphi/eae22f5fa71f5d78d426 to your computer and use it in GitHub Desktop.
Save Hypnosphi/eae22f5fa71f5d78d426 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
vertical headings
<!DOCTYPE html>
<html lang="en">
<head>
<style>
table {
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}
/* IE 6-8 support */
.vertical {
text-align: left;
width: 20px;
height: 250px;
writing-mode: tb-rl;
filter: fliph flipv;
}
</style>
<meta charset="UTF-8">
<title>Vertical headings</title>
</head>
<body>
<table>
<tr>
<th>
<div class="vertical">
Очень длинный заголовок
</div>
</th>
<th>
<div class="vertical">
Еще один длинный заголовок
</div>
</th>
</tr>
</table>
<script>
(function() {
// IE 8 and older
if (!document.createElementNS || !document.getElementsByClassName) {
return;
}
// replace vertical divs with svg
var verticals = document.getElementsByClassName('vertical');
while (verticals.length) {
var el = verticals[0],
svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'),
h = el.clientHeight,
w = el.clientWidth;
svg.setAttribute('height', h);
svg.setAttribute('width', w);
var text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
svg.appendChild(text);
text.setAttribute('transform', 'rotate(270,' + (h + w - 2) / 2 + ',' + (h - w + 2) / 2 + ')');
var textNode = document.createTextNode(el.firstChild.data);
text.appendChild(textNode);
el.parentNode.replaceChild(svg, el);
}
})();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment