<!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>
    @import url(../text/international/resources/Mac-compatible-font-fallback.css);
    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>