| <!DOCTYPE HTML> |
| <html> |
| <head> |
| <title>Vertical Font Fallback</title> |
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
| |
| <style type="text/css"> |
| |
| body { |
| margin: 50px; |
| font-size: 20px; |
| font-family: Times; |
| } |
| |
| .lrblock { |
| writing-mode: tb-lr; /* IE */ |
| -webkit-writing-mode: vertical-lr; |
| height: 275px; |
| margin-bottom: 50px; |
| padding: 1px; |
| background-color: #eee; |
| } |
| |
| .basic { |
| width: 275px; |
| margin: 0; |
| padding: 1px; |
| writing-mode: lr-tb; /* IE */ |
| -webkit-writing-mode: horizontal-tb; |
| } |
| |
| div.d0 { |
| background-color: #fee; |
| } |
| |
| div.d1 { |
| background-color: #ffe; |
| } |
| |
| p { |
| margin: 10% 5% 10% 5%; |
| background-color: #faa; |
| border-left: 20px solid #f88; |
| border-right: 20px solid #f88; |
| line-height: 1em; |
| padding: 1px; |
| } |
| |
| .vert { |
| writing-mode: tb-rl; /* IE */ |
| -webkit-writing-mode: vertical-rl; |
| } |
| |
| </style> |
| </head> |
| <body> |
| |
| <div class="lrblock"> |
| <div class="basic d0"><p>第一段落 paragraph 1</p><p>第二段落 paragraph 2</p></div> |
| <div class="basic d1 vert"><p>第一段落 paragraph 1</p><p>第二段落 paragraph 2</p></div> |
| </div> |
| |
| </body> |
| </html> |
