Chapter Text
This is my playground for vertical text. This here is the top. I try for a rectangle written with text. The Coding Encyclopedia by Anon shows vertical text in chapter 3. Goddess_of_the_arena has mentioned this and more stuff like mirror text here. But they only wrote about one vertical part. I want text on all sides:
a spider
And this is the right side of the page. Simple. Works like Anon promised. This gives me no headache.
It basically is "writing-mode: vertical-rl". But lr instead of rl is not working on AO3, therefore, I had to rotate the other vertical text.
Here is the CSS so far:
#workskin .room {
text-align: justify;
width: 80%;
position: relative;
margin: 0 auto 30px;
overflow: hidden;
height: 300px;
background: #B2ADA9;
background-size: 100% 25px;
display: table;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
border-style: solid;
border-width: 2px;
border-color: #333333;
border-radius: 5px;
padding-top: 10px;
padding-right: 25px;
padding-bottom: 10px;
padding-left: 25px;
}
#workskin .verticalL {
position: absolute;
writing-mode: vertical-rl;
transform: rotate(180deg);
top: 80px;
bottom: 80px;
left: 25px;
width: auto;
}
#workskin .verticalR {
position: absolute;
writing-mode: vertical-rl;
top: 80px;
bottom: 80px;
right: 25px;
width: auto;
}
#workskin .room .loom1 {
width: 80%;
float: left;
position: relative;
left: 50%;
transform: translateX(-50%);
text-align: justify;
padding: 0;
font-size: 10px;
color: white;
}
#workskin .room .loom2 {
position: absolute;
writing-mode: vertical-rl;
transform: rotate(180deg);
top: 80px;
bottom: 80px;
left: 100px;
width: auto;
font-size: 10px;
background-image: url(https://i.gifer.com/7HHY.gif);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
Here is the HTML:
<div class="room">
<p>
<span class="room1">Text on the top.</span>
</p>
<p>
<span class="verticalR">Text vertical right</span>
</p>
<p>
<span class="loom1">CSS and HTML</span>
</p>
<p>
<span class"loom2">What is with loom2?</span>
</p>
<p>
<span class="verticalL"> Text vertical left.</span>
</p>
lots of: <p> </p>
<p>Text upside down</p></div>
What is with loom2?
Loom2 exists!
Here is text above the other text.
I try not to disturb your reading right now, but yeah. It is what it is. Cool.
And here is the left side, vertical, rotated. It can't be rotated with rl and lr but you can rotete some degrees, and that's fine.
It has a problem with staying in this box, therefore, I used breaks
(whatever I try, it doesn't like to be caged and always escapes on the top. So whatever, breaks it is (for now? for ever? who knows?)
˙sɹǝʇdɐɥɔ ɹǝɥʇo ǝɥʇ ɟo ǝuo ɯoɹɟ ɹoʇɐɹǝuǝƃ ʇxǝʇ ǝɥʇ ɥʇᴉʍ pǝʇɐɹǝuǝƃ sᴉ ʇI ˙ǝƃɐd ǝɥʇ ɟo ɯoʇʇoq ǝɥʇ ʞɹɐɯ oʇ ʇxǝʇ uʍop ǝpᴉsdn sᴉ ǝɹǝH
Neat. That's what I wanted. It's not completely polished, but it works: A rectangle with words surrounding two texts in the middle that overlap. Now, I need to include pages like an "Choose your own adventure" thing (so that these texts appear in succession and thus are better readable) and I can finally post my fic :)
This obviously doesn't work well in a mobile because a lot of it IS anchored in a place and a smaller screen is destroying the planned visuals.
Don't bei surprised by the spider, it makes sense for my fics (for which I wrote this).
Some other cool stuff with the text (by Goddess_of_the_arena). They show how to use this stuff in the middle of a larger text, like a single mirrored word or upside down word.
Mirror text
HTML:
<span class=“mirror”>Mirror text</span>
CSS:
#workskin .mirror {
display: block;
-moz-transform: matrix(-1, 0, 0, 1, 0, 0);
-webkit-transform: matrix(-1, 0, 0, 1, 0, 0);
-o-transform: matrix(-1, 0, 0, 1, 0, 0);
}
You can do upside down text with the text generator (see the chapter with that name), but you can do it with CSS and HTML, too:
Text upside down
HTML:
<span class=“giu”>Text upside downtext</span>
CSS:
#workskin .giu {
display: block;
-moz-transform: matrix(1, 0, 0, -1, 0, 0);
-webkit-transform: matrix(1, 0, 0, -1, 0, 0);
-o-transform: matrix(1, 0, 0, -1, 0, 0);
}
Well, text can be tilted, like you see with the vertical text. You don't need 180 degrees, of course. It looks like this:
Tilting Text
Tilting Text
CSS:
#workskin .tilt-L {
transform: rotate(-30deg);
position: absolute;
}
#workskin .tilt-R {
transform: rotate(30deg);
position: absolute;
}
And now:
This Text! Written like this:
#workskin .upright {
writing-mode: vertical-lr;
text-orientation: upright;
}
It's the same as the other vertical text but with the text-orientation: upright.
Here, it's important whether it's "rl" or "lr" because the second line continues on the right or left side!