CSS - sauts de colonne texte RTL - Stack Overflow

I'm experimenting with rendering vertically-aligned Japanese text, and am having an odd problem. I've created the following CSS class to tag vertical text:

.rtl {
    -ms-writing-mode: tb-rl; 
    -webkit-writing-mode: vertical-rl;
    -moz-writing-mode: vertical-rl;
    -ms-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
    float: right;
    padding: 0;
    margin: 0.4em;
}

Depending on where I place it, one of two problems comes up. When I put the class in a <p> tag (as originally intended) it floats fine, but the new "column" starts adjacent to the block of text furthest down on the page until the bottom block is the one all the way to the left, at which point it starts the process again from the right edge of the page.

So, for example, given blocks A through G, the layout looks something like this:

C B AA
C B AA
  B AA
E D AA
E D AA
  D
   G F
   G F
   G

Here's some sample HTML for testing purposes: http://jsfiddle.net/salota8550/s4B35/

If I put the class in a div tag instead of <p> and format everything else inside it as I would for horizontal text, however, it starts displaying text from the right hand side of the page and runs off the left with no option to scroll left to view it.

While I'm sure there's a CSS property I can set to allow scrolling, my ideal solution would be to allow it to break into columns of a consistent height without having to manually separate the text into separate <div>s. Any ideas how to achieve this?

I'm experimenting with rendering vertically-aligned Japanese text, and am having an odd problem. I've created the following CSS class to tag vertical text:

.rtl {
    -ms-writing-mode: tb-rl; 
    -webkit-writing-mode: vertical-rl;
    -moz-writing-mode: vertical-rl;
    -ms-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
    float: right;
    padding: 0;
    margin: 0.4em;
}

Depending on where I place it, one of two problems comes up. When I put the class in a <p> tag (as originally intended) it floats fine, but the new "column" starts adjacent to the block of text furthest down on the page until the bottom block is the one all the way to the left, at which point it starts the process again from the right edge of the page.

So, for example, given blocks A through G, the layout looks something like this:

C B AA
C B AA
  B AA
E D AA
E D AA
  D
   G F
   G F
   G

Here's some sample HTML for testing purposes: http://jsfiddle.net/salota8550/s4B35/

If I put the class in a div tag instead of <p> and format everything else inside it as I would for horizontal text, however, it starts displaying text from the right hand side of the page and runs off the left with no option to scroll left to view it.

While I'm sure there's a CSS property I can set to allow scrolling, my ideal solution would be to allow it to break into columns of a consistent height without having to manually separate the text into separate <div>s. Any ideas how to achieve this?

Source