Home Explore Help
Sign In
cpp
/
RmlUi
mirror of https://github.com/mikke89/RmlUi.git
2
0
Fork 0
Files Issues 0 Wiki
Branch: master
Branches Tags
RmlUi
/
Tests
/
Data
/
VisualTests
/
inline_formatting_01.rml

inline_formatting_01.rml 3.4 KB
Permalink History Raw

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455 
  1. <rml>
    2. 

  2. <head>
    3. 

  3. 	<title>Inline formatting 01</title>
    4. 

  4. 	<link type="text/rcss" href="../style.rcss"/>
    5. 

  5. 	<link rel="help" href="https://www.w3.org/TR/css-inline-3/#model" />
    6. 

  6. 	<meta name="Description" content="Test various inline formatting details." />
    7. 

  7. 	<style>
    8. 

  8. 		body {
    9. 

  9. 			width: 1020px;
    10. 

  10. 			padding: 0;
    11. 

  11. 			border: 12px #ddd;
    12. 

  12. 		}
    13. 

  13. 		hr {
    14. 

  14. 			clear: both;
    15. 

  15. 			margin: 15px;
    16. 

  16. 			display: block;
    17. 

  17. 		}
    18. 

  18. 		span {
    19. 

  19. 			color: red;
    20. 

  20. 		}
    21. 

  21. 		span.outer {
    22. 

  22. 			padding: 5px;
    23. 

  23. 			border: 4px #ee0;
    24. 

  24. 			margin: 5px;
    25. 

  25. 		}
    26. 

  26. 		span.inner {
    27. 

  27. 			padding: 5px;
    28. 

  28. 			border: 2px #00e;
    29. 

  29. 			margin: 5px;
    30. 

  30. 		}
    31. 

  31. 		.paragraph {
    32. 

  32. 			margin: 15px 0;
    33. 

  33. 		}
    34. 

  34. 		.inner-blocks span.inner {
    35. 

  35. 			display: inline-block;
    36. 

  36. 		}
    37. 

  37. 		.inline-blocks span {
    38. 

  38. 			display: inline-block;
    39. 

  39. 		}
    40. 

  40. 	</style>
    41. 

  41. </head>
    42. 

  42. 

  43. <body rmlui-debug-layout>
    44. 

  44. 

  45. <div class="paragraph" id="plain">In consectetur, neque dignissim tincidunt dapibus, leo metus molestie erat, eu pharetra velit nunc in ipsum. Donec aliquet malesuada iaculis. Quisque maximus urna in congue placerat. In hac habitasse platea dictumst. Mauris a fringilla augue. Donec posuere ante at orci efficitur porttitor vitae ac tellus.<br/>Nunc nec sapien orci. Sed rhoncus et dui sed sagittis. Nullam venenatis quis elit vel mattis. In mattis erat et blandit aliquam. Aliquam erat volutpat.</div>
    46. 

  46. <hr/>
    47. 

  47. <div class="paragraph">In consectetur, neque dignissim tincidunt dapibus, <span class="outer">leo metus <span class="inner">molestie erat</span>, eu pharetra <span class="inner">velit nunc</span> in ipsum. Donec aliquet <span class="inner">malesuada iaculis.</span></span> Quisque maximus urna in congue placerat. In hac habitasse platea dictumst. Mauris a fringilla augue. Donec posuere ante at orci efficitur porttitor vitae ac tellus.<br/>Nunc nec sapien orci. Sed rhoncus et dui sed sagittis. Nullam <span class="outer">&nbsp;<span class="inner">venenatis quis</span> <span class="inner">elit vel</span> mattis</span>. In mattis erat et blandit aliquam. Aliquam erat volutpat.</div>
    48. 

  48. <hr/>
    49. 

  49. <div class="paragraph inner-blocks" id="inner-blocks">In consectetur, neque dignissim tincidunt dapibus, <span class="outer">leo metus <span class="inner">molestie erat</span>, eu pharetra <span class="inner">velit nunc</span> in ipsum. Donec aliquet <span class="inner">malesuada iaculis.</span></span> Quisque maximus urna in congue placerat. In hac habitasse platea dictumst. Mauris a fringilla augue. Donec posuere ante at orci efficitur porttitor vitae ac tellus.<br/>Nunc nec sapien orci. Sed rhoncus et dui sed sagittis. Nullam <span class="outer">&nbsp;<span class="inner">venenatis quis</span> <span class="inner">elit vel</span> mattis</span>. In mattis erat et blandit aliquam. Aliquam erat volutpat.</div>
    50. 

  50. <hr/>
    51. 

  51. <div class="paragraph inline-blocks" id="inline-blocks">In consectetur, neque dignissim tincidunt dapibus, <span class="outer">leo metus <span class="inner">molestie erat</span>, eu pharetra <span class="inner">velit nunc</span> in ipsum. Donec aliquet <span class="inner">malesuada iaculis.</span></span> Quisque maximus urna in congue placerat. In hac habitasse platea dictumst. Mauris a fringilla augue. Donec posuere ante at orci efficitur porttitor vitae ac tellus.<br/>Nunc nec sapien orci. Sed rhoncus et dui sed sagittis. Nullam <span class="outer">&nbsp;<span class="inner">venenatis quis</span> <span class="inner">elit vel</span> mattis</span>. In mattis erat et blandit aliquam. Aliquam erat volutpat.</div>
    52. 

  52. 

  53. <handle size_target="#document"/>
    54. 

  54. </body>
    55. 

  55. </rml>
    56.