<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Bidi text in inline with background image</title> <style type="text/css"> body { font-size: 0; } span { padding: 29px 0; line-height: 58px; } .bgleft { background: url(mozilla-banner.gif) no-repeat; } .bgright { background: url(mozilla-banner.gif) no-repeat right top; } i { padding: 30px; } </style> </head> <body> <p dir="rtl"><span class="bgleft"><i>‏</i><br><i>‎</i><i>‏</i><i>‎</i></span><i>‎</i></p> <p dir="rtl"><span class="bgright"><i>‏</i><br><i>‎</i><i>‏</i><i>‎</i></span><i>‎</i></p> <p dir="ltr"><span class="bgleft"><i>‎</i><br><i>‎</i><i>‏</i><i dir="ltr">‎</i></span><i>‏</i></p> <p dir="ltr"><span class="bgright"><i>‎</i><br><i>‎</i><i>‏</i><i dir="ltr">‎</i></span><i>‏</i></p> </body> </html>