Mind Map Application: Vertical text in the Chinese language

I refer to an experimental feature in Firefox.

To enable this feature, type:

about:config

in the address bar.

Enter this line below:

layout.css.vertical-text.enabled

to search.

Press enter.

Double-click this preference name.

You should see the screen below:

Now you should see the vertical text.

Technical details:

https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode

I modified a sample HTML file with CSS based on the valuable advice:

http://generatedcontent.org/post/45384206019/writing-modes

https://dl.dropboxusercontent.com/u/444684/OpenWebDemos/css3writingModes/japanese.html

Firefox used:

Firefox version 40.0.3.

---

<!DOCTYPE html>
<html>
<head>
        <meta charset="utf-8" />
        <title></title>
        <style>
                html {
                        font-size: 10px;
                        width: 100%;
                }
                body {
                        font-size: 1.5rem;
                        background-color: #eee;
                }
                
                article {
                        width: 1024px;
                        margin: 2rem auto;
                        padding: 5rem 0;

                        background-color: white;
                        box-shadow: 0 0 5px silver;
                        /**font-family: "Droid Sans", sans-serif;**/
                        color: #555;
                }
                header {
                        width: 100%;
                        height: 34rem;
                        margin-bottom: 8rem;

                        background-image: url("x");
                        background-size: 100% auto;
                        
                        -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 */


                /**     below: '-' can become '|'; it looks strange...
                /**     -webkit-text-orientation: upright;
                        -moz-text-orientation: upright;
                        -ms-text-orientation: upright;
                        text-orientation: upright;  ** /

                        font-size: 2.2rem;
                        margin-left: 5rem;
                        height: 30rem;                  
                }
                
                section p {
                        text-indent: 2.3rem;
                        margin: 4.6rem;
                        text-align: justify;
                }  
                
                footer { 
                    margin: 0 auto;
                    width: 1280px;
                    color: grey;
                }
        </style>
</head>
<body>
        <article>
                <header>
                        <h1></h1>
                </header>
                <section>
                        <h2>唐朝</h2>
                        <p>唐朝是中國歷史上繼漢朝之後的另一個盛世。共歷289年，22位皇帝。由唐高祖李淵所建立，與隋朝合稱隋唐。</p>
                        <p>唐朝全盛時在文化、科技、政治、經濟、外交等方面都達到了很高的成就。在中國歷史上有大量的科技發明，四大發明之中有兩個即火藥和印刷術都誕生於唐朝。</p>
                        <p>唐朝時期漫長，大致上可以分成前期與後期。其分界點可按政治與經濟角度區分成安史之亂與兩稅法的頒布。安史之亂之前，唐朝國力強盛，經濟繁榮，武將四處開疆拓土，文臣穩定朝政，是唐朝的鼎盛時期。</p>
                </section>
                
        </article>
        <footer>
            <small>Text taken from the Chinese Wikipedia article: https://zh.wikipedia.org/zh-tw/唐朝</small>
        </footer>
</body>
</html>

---

Mind Map Application

Thursday, September 3, 2015

Vertical text in the Chinese language

No comments: