Skip to content

Instantly share code, notes, and snippets.

@skoji

skoji/test.html

Last active August 29, 2015 14:14
Show Gist options
  • Save skoji/209ca0413d245fa9f565 to your computer and use it in GitHub Desktop.
Save skoji/209ca0413d245fa9f565 to your computer and use it in GitHub Desktop.
Download ZIP
「発狂した電車」 部分
Raw
test.html
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
<style type="text/css">
body {
margin: 1em;
writing-mode: vertical-rl;
-webkit-writing-mode: vertical-rl;
}
.t {
display: inline-block;
}
.rot270 {
-webkit-transform: rotate(270deg);
}
.rot180 {
-webkit-transform: rotate(180deg);
}
.rot90 {
-webkit-transform: rotate(90deg);
}
.ascii-layout {
font-family: monospace;
line-height: 1;
letter-spacing: normal;
white-space: pre;
}
.ascii-layout p {
margin: 0;
}
.sideways {
-webkit-text-orientation: sideways
}
</style>
</head>
<body>
<p>うつろの瞳孔！</p>
<p>窓――<span class="t rot270">窓</span>――<span class="t rot180">窓</span></p>
<p style="indent: 1em;">夕日がギリギリッと眩惑する！</p>
<div class="ascii-layout" style="margin-top: 3em;">
<p>街路樹　┃　<span class="t rot180">街路樹</span></p><p>　　　　┃　　　　</p><p><span class="t rot180">街路樹</span>━╋━街路樹</p><p>　　　　┃　　　　</p><p>街路樹　┃　<span class="t rot180">街路樹</span></p><p> </p><p>………………………</p>
</div>
<p style="margin-top: 3em;">
<span class="sideways" >街路樹の下で</span>ＸＸＸ白いパラソルが笑った！
</p>
<p>頭と胴とがバ<span class="t rot90">ラ</span><span class="t rot270">バ</span><span class="t rot180">ラ</span>にほぐれて</p>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment