Leaderboard

You know how you can translate Japanese far too literally and end up with stilted and nonsensical prose? It’s also possible reinterpret Japanese graphics far too literally and up with an illegible mess. Case in point: vertical type. Japanese text is typically typeset one of two ways: the traditional tategaki style (characters arranged in vertical columns, read from right to left), or the more modern yokogaki style (characters arranged in horizontal rows, read left to right, as in English). When editing images for visual novels, you’ll usually be dealing with a lot of tategaki, but it’s possible you’ll encounter some yokogaki as well. Unless you just bought a pamphlet from that crazy guy hanging out beneath the subway stairs — Happy Birthday to Gravy! I’m Made of Bees! — you will literally never see English typeset this way. So how do you handle it when you do? Typically, as long as you have the room, you’d set it the same as you would any other English text: horizontal, left to right, for maximum legibility. But what if you don’t have room? Particularly when dealing with UI elements, you might only have enough real estate for a single vertical column of characters. What then? Grab it by the spine Thankfully, generations of English-language typesetters have already solved this problem for us. Just walk over to your media shelf and look for yourself. See all those books, DVDs, video games you’ve got lined up there? Not only did you spend an obscene amount of money on those — seriously, how are you ever going to pay off your student loans this way? — but their spines all display titles the exact same way: horizontal type, rotated 90 degrees clockwise so that it reads from top to bottom. Any designer worth his or her salt will tell you that’s how it’s done. So there’s your answer. Do that. You’re welcome. But now you face a much bigger challenge: convincing non-designers that this is, in fact, the best approach. The vertical smile frown This came up once on a project where almost the entire UI was arranged in vertical lines of Japanese calligraphy. I’d painstakingly set hundreds of text elements in the correct bookspine-style, only to get a note back from the project lead asking that everything be re-typeset in the exact manner of the original Japanese, character stacked atop character. Y o u k n o w , l i k e t h i s ? I’ve been a professional designer for enough years that, honestly, I forget not everyone gives much thought to why you don’t set type like this. So in that sense, the request didn’t annoy me; I understood the motivation behind it. But I did end up having to write a fairly lengthy defense of bookspine-style type as a result. Since I’m not the first person to face this problem, and I know I won’t be the last, I thought it might be useful to summarize a few of those points here. If you’re an image editor, maybe it’ll give you ammunition to back up your case one day. If you’re working with an image editor, maybe it’ll provide some insight into the thought he or she puts into typesetting. If you’re my mom, maybe you’ll finally believe I learned something in college. The End of the World as We Know It Seeing is believing, so let’s try all the options and see for ourselves what works and what doesn’t. I’ve cropped in on a small slice from a hypothetical UI sprite sheet for our discussion. I’ve also simplified it, hiding all the various hover and active states, so all we’re dealing with is the vanilla text. Here’s the original edited version: For this project, we need a script/calligraphic type that will remain legible even at very small sizes. (I do all my VN reading on an 8” tablet, so I use that as my small-screen baseline.) We land on this font here, a clean Western script that still feels right at home among traditional Eastern design elements. And since you can see that some of the UI text runs very long — these are chapter titles, I imagine — compactness is also a consideration. This typeface handles that quite nicely. Let’s see what happens if, rather than bookspine-style, we run these lines vertically: What’s wrong here? More like, what isn’t? It doesn’t fit: Unlike squarish Japanese characters, English letters tend to be taller than they are wide. This means if you stack them vertically, you’ll end up with something that eats up almost twice as much space as horizontal type. You’ll need to reduce the point size to make everything fit. Or worse yet, squish the letters vertically to compensate. Yuck. It fights against the letterforms: This is a script face, so it slants rightward, one letter leading the eye into the next. Moreover, lowercase letters set in script often physically join to one another, as if written in a smooth, flowing hand. A vertical stack is antithetical to both of these: there is no “next” letter to lead the eye into, nor is there any adjoining character to connect to. It looks like a gap-toothed palooka: Notice how some of the letter pairs almost overlap, while others have relatively large spaces between them. This is another reason English type wasn’t meant to stack vertically. Even though there’s exactly the same amount of space between the baseline of each letter, some have descenders (e.g., the “tails” of the letters y or q), some have ascenders (e.g., the “flagstaff” of the letters b or d), and some have neither (e.g., x or o). This gives the vertical type a drunken stagger-step of sorts, an ungainly visual gait that we’d like to avoid at all costs. It doesn’t handle punctuation well: There’s no graceful way to handle periods, colons, and so forth in vertical type. You could center it below the last letter, as in the original Japanese, but that looks confusing in English. And how would you handle a possessive, like “Darbury’s cat”? Stacked vertically, it would look more like “Darbury, scat.” (Fine. See ya, ingrate.) It’s borderline illegible: There’s been lots and lots of research into the science of how people read — how we recognize letters, words, and sentences. There’s a lot of pattern recognition going on in our brains and, for native speakers of Western languages, those patterns almost always work horizontally. Setting type vertically can literally slow down reading and comprehension speed by an order of magnitude. So let’s be clear: this sucks. But there are a few things we can do to slightly minimize the suckage. First, let’s set everything in all caps. Like this That eliminates our gap-tooth problem; uppercase letters don’t have ascenders or descenders, so all the letters now appear evenly spaced. But we’ve had to reduce the point size even further to make everything fit. (We started out at 20pt. We’re now at 12pt.) Also, our calligraphic type still slants to the right, making each letter feel like a drunk who leans against a wall only to find it isn’t there. We want a handwritten feel to the type, however, so we try switching to an upright block letter font instead: This is pretty much as good as it’ll get ... and it’s still not great. It’s still hard to read, and we’ve had to sacrifice the elegance of a script typeface. But wait — it gets worse. Right now, these lines have lots of padding left and right, since I’ve hidden all the other elements on this sprite sheet. What happens when they sit closer together, as they probably will in-game. You get this: I don’t know about you, but my brain wants to start reading horizontally adjacent words as sentences: “It birds and eye listen” Huh? It’s like trying to drive an SUV where the steering is constantly pulling to the right. It’s not what we’re looking for in a car, and it’s not what we’re looking for in our typesetting. In short, vertically set text is a god-awful mess. Don’t use it. (Obligatory waffling: Okay, maybe if there’s one or two vertical buttons in the whole game. And maybe if they were really, really short — you know, like “SAVE” and “QUIT”? Maybe then you could get away with it. But otherwise, nononono a thousand times no.) Introducing my backup singers I’m not the only one preaching this gospel. These fine folks agree: So the next time someone asks you to set vertical type, just say no. Then link to this blog post and tell ‘em Darbury told ya so.

So I just spent 50 minutes of my day watching this. Trying to process what I just watched is hard, there's just so much information to take in. I watched it alongside OriginalRen, SuikaShoujo and The Major, yet despite our best efforts, our brains simply were no match for the depth and intricacy this anime provides. I'll try to give you a feel, a small sample of what it feels like to watch "Issho ni Sleeping: Sleeping with Hinako", but I truly believe that the only real way to appreciate this show is to just watch it yourself. So first off we have our heroine Hinako. Hinako really likes to sleep. Her main trait as a character is not being able to fix the strap on her shirt. As you can see from this cleverly crafted angle, this entire anime is told in first person perspective. But we're just scratching the surface of how thick the plot really gets. After Hinako changes clothes, covering your face so you don't see her changing, even though she just ends up sleeping in her underwear anyway, she goes to sleep. And thus, our sleep adventure begins! That is the face of pure bliss. Here we have some amazing shots that truly depict the wonders of a 2D girl sleeping. A real good close up of the heroine, it's almost like she's breathing on you In this shot here, you can see Hinako's breasts changing sizes, giving us a clear reason why Hinako just can not get the left strap of her shirt to stay in place, her left breast simply doesn't have as much mass. This shot here is a classic. The subtle twitch Hinako's leg makes each time really provides livelyness to her sleep, making you feel like you're sleeping right next to her. 10 minutes in and the anime really ramps it up by having Hinako turn to the other side. In my opinion this was one of their best moves yet. Here we get a first glimpse of Hinako's windowsill which displays a clock and a vase with a plant. This is a very intringuing as the clock displays no numbers, a fact that will become really important later on so make sure you keep it in mind. Another very rare shot of Hinako's armpit, one of my personal favorites if I daresay so myself. The disproportionally sized breasts really help elevate that armpit. 18 minutes in and the biggest game changer yet, Hinako makes use of one of her pillows! We can neither confirm nor deny if there's any significance behind this pose and the pillow's peculiar shape. And just 30 seconds later we are shown Hinako's sleep eating abilities. This is one of the rarest shots in the whole story, at the 22:22 minute mark, Hinako dangles her arm from the bed. What a delightful display of character. And this 24 minute mark is the crucial turning point where we have a clear view of Hinako's room and lo and behold, nobody is sleeping next side her, even though we're supposed to be there, what could this possibly mean!? At the 26 minute mark, Hinako has a dream about the moment we confessed to her and she gladly accepted our feelings. While the dream itself lasted a mere 10 seconds, I could really feel a deep emotional connection with Hinako's character just from watching her sleep for the past 26 minutes. And in the next minute, Hinako wakes up. I'm sure we were thinking the same thing, and that is how much we love each other. Hinako, being the amazing girlfriend she is, sings us a lullaby with really inspiring lyrics such as "Go to sleep, go to sleep on Hinako's chest" which have the result of making her fall asleep. At the 30 minute mark, Hinako has yet another dream, this time about when she was training hard to lose weight, she even gives us advice on how to be BIG like Hinako. And now, the biggest game changer yet, Hinako falls off her bed! My heart could barely take it, seeing Hinako fall on the floor after 30 minutes of sleeping really came out of nowhere, this anime sure knows how to tug on your heart strings. And now starts the most romantic scene in an anime I have ever seen. What a straightforward approach. Hinako tops all those tsunderes in generic romcoms, you don't get this level of romance too often. Of course we have a really deep connection with Hinako, and she reassures us of that by returning our feelings (even though we didn't really say anything, I'm sure our feelings got acress). I had to hold back my emotions over how realistic everything got, the intense urge to kiss my screen really started to come out. *doki doki* Hinako wastes no time though, she knows what her main goal is, this woman has her priorities set straights, that's why right after this she once again heads to bed and instantly falls asleep. Pro sleepers really are something else. But the thrilling ride isn't over yet, can you believe they still have more in store? This time, Hinako invites us to sleep on the same bed as her. My heart almost jumped out of my chest. The anime really makes this a realistic experience by tilting the camera 90 degrees. It truly felt like I was right next to Hinako. [immersion intensifies] 35 minutes in, Hinako does yet another unpredictable thing, she decides to get a night snack. Gosh, this anime really doesn't hold back on the plot twists. Brushing your teeth is important too. Even if you didn't eat anything. Deep. Once again, after falling asleep, Hinako falls on the floor. This time facing the other way, I liked that change of pace, this anime really knows when to spice it up. She doesn't forget her girlfriend duties though and reminds us we are also an entity, a sentient being, and thus we need sleep as well. Notice how her strap keeps sagging lower and lower, symbolizing we're reaching the end of our journey. After she falls asleep, Hinako has one last dream. In this one though, she ended up getting fat due to eating so many snacks. I'm sure she'll resume her training the next day! And now, after a whole 40 minutes of Hinako sleeping, morning comes, and this is where the plot really thickens! You see, after this, Hinako sleeps with us again, twice, do you not see what this means!? This whole time, we've actually been trapped in a dream world, but not just that, we were trapped in a dream world, inside a dream world, inside a dream world, inside a dream world, and we weren't a human being either, we were a ghost that posessed random objects around Hinako's room in order to try to wake her from the dream by looking at her body from several different angles. Remember the clock I mentioned at the beginning? What was missing? Pointers! That's because in this dream world, there's no time flow! We've been stuck sleeping with Hinako over and over, that's why she always wears the same outfit when she sleeps. I could barely see this coming, it came by so fast my brain just had no time to process it. This anime is a deconstruction of the human psyche, one that if you're not paying attention to, you will miss its profound message, the 50 minute length time really manages to portray to intricacies of the brain by having the same still shots over and over again across the timeline, you really feel like you're diving into Hinaki's profound sleepiness and tracing its patterns. The emotional bonds you manage to form with Hinako as you watch her sleep from every possible angle really make this a standout from the crowd. You can not get this deep level of characterization anywhere else. It brought me to tears as my eyes were strained while I wtched 50 minutes of a girl sleeping on a bed, making me empathize with her. The story sucks you in, almost making you fall asleep just like Hinako. This 16 year old girl who can't put on a shirt strap properly is the apogee of all female characters. If you haven't used the term "waifu" now, I'm sure this anime will change your mind. Issho ni Sleeping: Sleeping with Hinako is, without a doubt, the best anime ever made.