1

I want to align East Asian texts vertically in a blog post but have no knowledge of CSS. I want it to look like this https://dl.dropboxusercontent.com/u/444684/OpenWebDemos/css3writingModes/japanese-upright.html .

I tried to do it in my blog but every character is vertically align, instead of just characters within the blog post. Here is my blog: http://dandan-koushun.blogspot.com/

Can you show me what is wrong? Below is my CSS:

<!DOCTYPE html>
<html lang="ja">
<section>
    <meta charset="utf-8" />
    <style>
        html {
            font-size: 10px;
            width: 100%;

        }
        body {
            width: 100%;
            height: 34rem;
            margin-bottom: 8rem;

            -ms-writing-mode: tb-rl; /* old syntax. IE */
            -webkit-writing-mode: vertical-rl;
            -moz-writing-mode: vertical-rl;
            -ms-writing-mode: vertical-rl;
            writing-mode: vertical-rl; /* new syntax */   
        }

        h1 {
            text-shadow: 0 1px 1px grey;
            color: white;
            font-weight: bold;
            font-size: 3rem;
            padding: 11rem 12rem 0 0;    
        }    
        section {
            -ms-writing-mode: tb-rl; /* old syntax. IE */
            -webkit-writing-mode: vertical-rl;
            -moz-writing-mode: vertical-rl;
            -ms-writing-mode: vertical-rl;
            writing-mode: vertical-rl; /* new syntax */

        }


</html>
KouShun
  • 11
  • 1

1 Answers1

1

What I would have done would be to use CSS3 to rotate the div by 90 degrees but what they do is the following:

ms-writing-mode: tb-rl;
-webkit-writing-mode: vertical-rl;
-moz-writing-mode: vertical-rl;
-ms-writing-mode: vertical-rl;
writing-mode: vertical-rl;
-webkit-text-orientation: upright;
-moz-text-orientation: upright;
-ms-text-orientation: upright;
text-orientation: upright;

Add that to the parent div.

Slava Knyazev
  • 5,377
  • 1
  • 22
  • 43