details-writing-mode-ref.html (1276B)
1 <!DOCTYPE html> 2 <!-- Any copyright is dedicated to the Public Domain. 3 - http://creativecommons.org/publicdomain/zero/1.0/ --> 4 5 <html> 6 <style> 7 body { 8 display: grid; 9 grid-template-rows: auto; 10 grid-template-columns: repeat(3, 150px); 11 } 12 .details { 13 border: 1px solid lightblue; 14 } 15 </style> 16 <body> 17 <div class="details" style="writing-mode: horizontal-tb; direction: ltr;"> 18 <summary>Summary</summary> 19 <p>This is the details.</p> 20 </div> 21 <div class="details" style="writing-mode: vertical-rl; direction: ltr;"> 22 <summary>Summary</summary> 23 <p>This is the details.</p> 24 </div> 25 <div class="details" style="writing-mode: vertical-lr; direction: ltr;"> 26 <summary>Summary</summary> 27 <p>This is the details.</p> 28 </div> 29 <div class="details" style="writing-mode: horizontal-tb; direction: rtl;"> 30 <summary>Summary</summary> 31 <p>This is the details.</p> 32 </div> 33 <div class="details" style="writing-mode: vertical-rl; direction: rtl;"> 34 <summary>Summary</summary> 35 <p>This is the details.</p> 36 </div> 37 <div class="details" style="writing-mode: vertical-lr; direction: rtl;"> 38 <summary>Summary</summary> 39 <p>This is the details.</p> 40 </div> 41 </body> 42 </html>