pop-up-alignment-and-direction.html 4.6 KB

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