<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<style>
h1 {
font-weight: bold;
font-size: 1em;
}
div {
border: 1px solid black;
padding: 5px;
width: 200px;
}
div p {
line-height: 2em;
}
#ltor p {
direction: ltr;
}
#rtol p {
direction: rtl;
}
#ltor span {
direction: ltr;
display: inline;
margin: 0 10px 0 25px;
padding: 0 25px 0 10px;
border: 1px solid blue;
border-left: 10px solid green;
border-right: 10px solid orange;
}
#rtol span {
direction: rtl;
display: inline;
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>Test that when we have images sprinkled within a span, borders, paddings and margins are still calculated correctly .</p>
<div id="ltor">
<p> aaa bbb ccc ddd eee fff למה עשיתי זאת gg<span> dgnjk <img src="#" style="border:1px solid blue;">njkng
</span>
זאת – איני יודע בעצמ
qqq rrr sss ttt uuu vvv</p>
<p><span>Some fill text<img src="#"></span></p>
</div>
<div id="rtol">
<p> aaa bbb ccc ddd eee fff למה עשיתי זאת gg<span> dgnjk <img src="#" style="border:1px solid blue;">njkng
</span>
זאת – איני יודע בעצמ
qqq rrr sss ttt uuu vvv</p>
<p><span>Some fill text<img src="#"></span></p>
</div>
</body>
</html>