| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" |
| "http://www.w3.org/TR/html4/strict.dtd"> |
| <html> |
| <head> |
| <style> |
| h1 { |
| font-weight: bold; |
| font-size: 1em; |
| } |
| div { |
| border: 1px solid black; |
| padding: 5px; |
| } |
| |
| div p { line-height: 2em; } |
| #ltor p { |
| direction: ltr; |
| unicode-bidi: normal; |
| } |
| #rtol p { |
| direction: rtl; |
| unicode-bidi: bidi-override; |
| } |
| span { |
| display: inline; |
| position: relative; |
| margin: 0 10px 0 25px; |
| padding: 0 25px 0 10px; |
| border: 1px solid blue; |
| border-left: 10px solid green; |
| border-right: 10px solid orange; |
| } |
| </style> |
| </head> |
| <body> |
| <p>There should be a SPAN in the middle of all four paragraphs that has padding, a green border, and a margin on the left, |
| and padding, an orange border, and a margin on the right.</p> |
| |
| <h1>Left-to-Right</h1> |
| <div id="ltor"> |
| <p> |
| Lorem ipsum dolor |
| <span> |
| sit amet, consectetur |
| </span> |
| adipisicing elit, sed do eiusmod tempor incididunt ut. |
| </p> |
| <p> |
| Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut |
| labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco |
| <span> |
| laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in |
| voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat |
| non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. |
| </span> |
| sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore |
| magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip. |
| </p> |
| </div> |
| |
| <h1>Right-to-Left</h1> |
| <div id="rtol"> |
| <p> |
| Lorem ipsum dolor |
| <span> |
| sit amet, consectetur |
| </span> |
| adipisicing elit, sed do eiusmod tempor incididunt ut. |
| </p> |
| <p> |
| Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut |
| labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco |
| <span> |
| laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in |
| voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat |
| non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. |
| </span> |
| sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore |
| magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip. |
| </p> |
| </div> |
| </body> |
| </html> |
