1<style> 2 select { display: block; font-size: 16px; } 3 label { display: block; font: 13px "Lucida Grande"; } 4 #reflection { font: 13px "Lucida Grande"; padding: 10px; width: 245px; } 5</style> 6 7<p> 8 For each of the direction settings below, and for each item in the pop-up menu below, verify that 9 the alignment and content match between the pop-up button, the menu item, and the value as it is 10 reflected below the pop-up button, and that the checkmarks appear on the start side of the item. 11</p> 12 13<label><input type="radio" name="direction" value="ltr" checked onchange="directionChanged(event)"> Left to right</label> 14<label><input type="radio" name="direction" value="rtl" onchange="directionChanged(event)"> Right to left</label> 15 16<select id="menu"> 17 <option style="direction: ltr;"> 18 First שניה (03) רביעית fifth 19 </option> 20 <option style="direction: rtl;"> 21 First שניה (03) רביעית fifth 22 </option> 23 <option style="direction: ltr; unicode-bidi: bidi-override;"> 24 First שניה (03) רביעית fifth 25 </option> 26 <option style="direction: rtl; unicode-bidi: bidi-override;"> 27 First שניה (03) רביעית fifth 28 </option> 29 <option> 30 משהו עם נִקּוּד 31 </option> 32 <option> 33 اللغة العربية 34 </option> 35 <option> 36 Et volià: ATSUI! 37 </option> 38 <option> 39 Directional ‮overrides‬ are confusing. 40 </option> 41 <option> 42 She said “‫יש TNT במזוודה!‬” and ran off 43 </option> 44</select> 45<div id="reflection"> 46 First שניה (03) רביעית fifth 47</div> 48<script> 49 var reflection = document.getElementById("reflection"); 50 51 document.getElementById("menu").onchange = function(event) { 52 var option = event.target.item(event.target.selectedIndex); 53 reflection.innerHTML = option.innerHTML; 54 optionStyle = getComputedStyle(option); 55 reflection.style.direction = optionStyle.direction; 56 reflection.style.unicodeBidi = optionStyle.unicodeBidi; 57 reflection.style.textAlign = getComputedStyle(event.target).direction === "ltr" ? "left" : "right"; 58 } 59 60 function directionChanged(event) 61 { 62 document.getElementById('menu').style.direction = event.target.value; 63 reflection.style.textAlign = event.target.value === "ltr" ? "left" : "right"; 64 } 65</script> 66