ime.rml 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119
  1. <rml>
  2. <head>
  3. <link href="../../../assets/rml.rcss" type="text/rcss" />
  4. <title>IME</title>
  5. <style>
  6. body {
  7. width: 700dp;
  8. height: 600dp;
  9. max-width: 100%;
  10. max-height: 100%;
  11. padding: 20dp;
  12. box-sizing: border-box;
  13. margin: auto;
  14. background-color: #f0f0f0;
  15. color: #333;
  16. font-family: LatoLatin;
  17. font-size: 15dp;
  18. overflow: auto;
  19. border-radius: 15dp;
  20. }
  21. h1 {
  22. font-size: 2em;
  23. color: #444;
  24. text-align: center;
  25. padding-bottom: 20dp;
  26. }
  27. p {
  28. font-size: 1em;
  29. line-height: 1.4;
  30. margin-bottom: 10dp;
  31. }
  32. .shortcut {
  33. font-family: rmlui-debugger-font;
  34. font-size: 0.95em;
  35. padding: 3dp 3dp 0dp;
  36. background: #e9e9e9;
  37. border: 1dp #e0e0e0;
  38. }
  39. form {
  40. display: block;
  41. background-color: #fff;
  42. padding: 20dp;
  43. margin-top: 15dp;
  44. border-radius: 5dp;
  45. }
  46. label {
  47. font-weight: bold;
  48. }
  49. input.text, textarea {
  50. box-sizing: border-box;
  51. width: 100%;
  52. padding: 10dp;
  53. border: 1dp #bbb;
  54. border-radius: 3dp;
  55. margin-top: 5dp;
  56. margin-bottom: 20dp;
  57. font-size: 1.1em;
  58. line-height: 1.4;
  59. cursor: text;
  60. }
  61. input.text:focus-visible, textarea:focus-visible {
  62. border-color: #666;
  63. }
  64. textarea {
  65. margin-bottom: 0dp;
  66. }
  67. scrollbarvertical {
  68. width: 12dp;
  69. cursor: arrow;
  70. margin-right: -1dp;
  71. padding-right: 1dp;
  72. }
  73. scrollbarvertical slidertrack {
  74. background-color: #f0f0f0;
  75. }
  76. scrollbarvertical sliderbar {
  77. background-color: #666;
  78. }
  79. textarea scrollbarvertical {
  80. width: 10dp;
  81. }
  82. </style>
  83. </head>
  84. <body>
  85. <h1>IME Sample</h1>
  86. <p>Input Method Editor (IME) is a software component that allows the user to type characters not otherwise
  87. available on a standard QWERTY keyboard. This is crucial for languages using a writing system different
  88. from Latin, such as Japanese, Chinese, Vietnamese, and others. You must add the language in the system
  89. options to use such a keyboard.</p>
  90. <p>IME is also used for emojis (<span class="shortcut">Win + .</span>) and the clipboard history (<span class="shortcut">Win + V</span>) on Windows.</p>
  91. <form>
  92. <label for="text">Input text</label>
  93. <input id="text" name="text" type="text" maxlength=100 value="😁" />
  94. <label for="text_area">Type multi-line text</label>
  95. <textarea id="text_area" name="text_area" rows=8>English: Hello, how are you?
  96. Japanese: こんにちは、お元気ですか?
  97. Korean: 안녕하세요, 어떻게 지내세요?
  98. Chinese (Simplified): 你好,你好吗?
  99. Chinese (Traditional): 你好,你好嗎?
  100. Vietnamese: Xin chào, bạn có khỏe không?
  101. Thai: สวัสดีครับ/ค่ะ สบายดีไหม?
  102. Arabic: مرحبًا، كيف حالك؟</textarea>
  103. </form>
  104. </body>
  105. </rml>