The CSS property leading-trim [1][2] is designed to solve this alignment problem (among others). However, it's still at the Working Draft stage, so it's going to take a while before browsers start supporting it.
Are you using Firefox? I see the same black box in Firefox too (which is actually an SVG inside an <img> tag), but in Chrome, it renders fine: https://imgur.com/a/NdvKN
It looks like the SVG's style block[0] applies a black background to the svg element:
svg {background: rgb(1.0,1.0,1.0)}
which fails to render in chrome due to the floats but renders fine in firefox. If set to white or removed entirely, it will display correctly in Firefox.
Google's announcement [1] about OT font variations mentions that a CSS proposal is in the works:
> Together with other browser makers, we’re already working on a proposal to extend CSS fonts with variations. Once everyone agrees on the format, we’ll support it in Google Chrome.
The same is true for Urdu as well, so if you want to distinguish Urdu from Persian: look for a backward moving (i.e. towards the right) horizontal stroke at the end of a word. This stroke will always run under the preceding letters of the word, except that some dots of the preceding letters may be moved beneath the stroke in order to avoid collision.
