text_decorator.rml 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687
  1. <rml>
  2. <head>
  3. <title>Text decorator</title>
  4. <link type="text/rcss" href="../style.rcss"/>
  5. <meta name="Description" content="A variety of text decorators. Hover over the elements to change the decorator."/>
  6. <style>
  7. body {
  8. background: #ddd;
  9. color: #333;
  10. width: 900dp;
  11. }
  12. div {
  13. margin: 5dp;
  14. width: 160dp;
  15. height: 60dp;
  16. box-sizing: border-box;
  17. border: 1dp #bbb;
  18. padding: 10px;
  19. float: left;
  20. }
  21. group {
  22. margin-left: 1em;
  23. display: flow-root;
  24. margin-bottom: 1em;
  25. }
  26. group > :nth-child(n):hover { decorator: text("Hello ♥ world!" red); }
  27. .basic > :nth-child(1) { decorator: text("Hello &#x1F30E; world!"); }
  28. .basic > :nth-child(2) { decorator: text("Hello 🌎 world!" #333); }
  29. .basic > :nth-child(3) { decorator: text("Hello 🌎 world!" center center); }
  30. .basic > :nth-child(4) { decorator: text("Hello 🌎 world!" 50% 50%); }
  31. .align_top_left > :nth-child(1) { decorator: text("Hello 🌎 world!" top left); }
  32. .align_top_left > :nth-child(2) { decorator: text("Hello 🌎 world!" left top); }
  33. .align_top_left > :nth-child(3) { decorator: text("Hello 🌎 world!" 0 0); }
  34. .align_top_left > :nth-child(4) { decorator: text("Hello 🌎 world!" 0dp 0dp); }
  35. .align_top_left > :nth-child(5) { decorator: text("Hello 🌎 world!" 0% 0%); }
  36. .color > :nth-child(1) { decorator: text("Hello 🌎 world!" blue); }
  37. .color > :nth-child(2) { decorator: text("Hello 🌎 world!" #00f); }
  38. .color > :nth-child(3) { decorator: text("Hello 🌎 world!"); color: blue; }
  39. .misc > :nth-child(1) { decorator: text("Hello 🌎 world!" black bottom right); }
  40. .misc > :nth-child(2) { decorator: text("Hello 🌎 world!" black bottom right) content-box; }
  41. .misc > :nth-child(3) { decorator: text("Helloooo 🌎 woooorld!" black) content-box; }
  42. .misc > :nth-child(4) { decorator: text("Hello 🌎 world!" fuchsia 20px 20%); }
  43. .misc > :nth-child(5) { decorator: text("Hello 🌎 world!" fuchsia 20px 20%); opacity: 0.5; }
  44. </style>
  45. </head>
  46. <body>
  47. Default properties [equivalent]
  48. <group class="basic">
  49. <div/>
  50. <div/>
  51. <div/>
  52. <div/>
  53. </group>
  54. Top-left alignment [equivalent]
  55. <group class="align_top_left">
  56. <div/>
  57. <div/>
  58. <div/>
  59. <div/>
  60. <div/>
  61. </group>
  62. Blue text [equivalent]
  63. <group class="color">
  64. <div/>
  65. <div/>
  66. <div/>
  67. </group>
  68. Miscellaneous
  69. <group class="misc">
  70. <div/>
  71. <div/>
  72. <div/>
  73. <div/>
  74. <div/>
  75. </group>
  76. </body>
  77. </rml>