Japanese subtitles vertical alignment

Question

I am working with jquery.

If I have a string like this:

新しい世界へようこそ。

Would it be possible to take each character, place it vertically in a div so I get vertical subtitles?

So that the correct formatting would be achieved? (I am not familiar with Japanese language)

`p { writing-mode: tb-rl; }` ? – nishantjr Jun 07 '14 at 06:48 — nishantjr, Jun 07 '14 at 06:48
http://generatedcontent.org/post/45384206019/writing-modes – Corey Jun 07 '14 at 07:01 — Corey, Jun 07 '14 at 07:01
http://stackoverflow.com/q/2508803/1402846 – Pang Jun 07 '14 at 07:04 — Pang, Jun 07 '14 at 07:04

score 0 · Answer 1 · answered Jun 07 '14 at 07:04

0

<p>新しい世界へようこそ。</p>

p { 
  -ms-writing-mode: tb-rl; 
  -webkit-writing-mode: vertical-rl;
  -moz-writing-mode: vertical-rl;
  -ms-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
}

http://jsfiddle.net/tenold/X78vC/1/

answered Jun 07 '14 at 07:04

Corey

2,453
4
35
63

nishantjr · Answer 2 · 2014-06-08T05:46:23.627

0

Taken from here.

 <div >こんいちわ 「1234」 １０月２０１４年</div>

div {
-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 */
}

UPDATE

After some more experimentation, I realize that specifying text-direction is not a good idea. Chrome on linux, displays halfwidth latin characters sideways, but full-width characters upright.

In the example, the 1234 is rotated sideways, but the １０月２０１４年 is shown vertically. Not specifying direction lets the browser do 'The Right Thing'.

http://jsfiddle.net/X78vC/3/

Chrome doesn't seem to let you do some interesting things, like squish 2 half-width numerals on to a single line - I wonder if ligatures could solve that at some point. Some good examples of vertical writing in Japanese are given here.

edited Jun 08 '14 at 05:46

answered Jun 07 '14 at 07:10

nishantjr

1,788
1
15
39

@toniq That's the way japanese is written vertically. – nishantjr Jun 08 '14 at 05:15
@toniq: Hmmm... It's actually more complicated than I thought. [This](http://lists.w3.org/Archives/Public/www-style/2010Jun/0133.html) shows some variations, in some examples text is partly upright, and partly sideways like [here](http://people.mozilla.org/~jdaggett/images/ex5-macfan201007-p30-softbank-ipad.png), [Here](http://people.mozilla.org/~jdaggett/images/ex1-nikkei20100602-aft-p1-nikkei-heikin.png) the do interesting stuff like squish numbers on to a single line. – nishantjr Jun 08 '14 at 05:27
I'm just beginner level Japanese, So you'll have to research/ask native speakers. I find latin text vertically oriented in top-to-bottom Japanese easiest to read and I think it is the most common. – nishantjr Jun 08 '14 at 05:29

Japanese subtitles vertical alignment

2 Answers2