1376231-vertical-gpos-adjustments-ref.html (845B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset=utf-8> 5 <style> 6 @font-face { 7 font-family: test; 8 src: url(../fonts/NotoSansCJKjp-Regular.subset.otf); 9 } 10 body { 11 font-family: test, serif; 12 line-height: 2em; 13 } 14 p { 15 margin: 1em; 16 } 17 span { 18 display: inline-block; 19 inline-size: 9em; /* length of 9 standard CJK chars */ 20 } 21 .v { 22 writing-mode: vertical-rl; 23 } 24 .green { 25 color: green; 26 background: green; 27 } 28 .overlay { 29 position: relative; 30 inset-block-start: -3em; 31 } 32 </style> 33 </head> 34 <body> 35 There should be no red: 36 <div> 37 <p><span> </p> 38 <p class="overlay"><span class="green"> </p> 39 <p><span> </p> 40 <p class="overlay"><span class="green"> </p> 41 </div> 42 <div class="v"> 43 <p><span> </p> 44 <p class="overlay"><span class="green"> </p> 45 <p><span> </p> 46 <p class="overlay"><span class="green"> </p> 47 </div>