Problem on iPhone

[phonoarchive]

Hello!
Please, could you help me with the issue on iPhone on this website: http://ecupatria.org
There is a broblem with baseline, I tried different things to fix it, but it still doesn't work properly.
Many thanks in advance!

[phonoarchive]

[Ciantic]

This is pretty annoying.

I wonder if someone has done drop caps using SVG generation, I think it would be most reliable.

[cedon]

@Ciantic But would a screen reader be able to interpret it correctly? Or would you also have to include a hidden span tag for them and add "role=presentation" to the drop cap?

[Ciantic]

@cedon yes or one need to find a other way to hide first letter, e.g. pseudo class ::first-letter. Anyways that part is not the hard part ,one could use the assistively hidden span the very least.

P.S. I think this works: ::first-letter { font-size: 0; } not sure if it works always, but with Chrome at least.

I found this: http://opentype.js.org/ I don't have immediate need to experiment with it, but it could be a useful tool for trying to implement SVG generated drop cap.