adobe-webplatform / dropcap.js

Beautiful CSS drop caps made easy
Other
929 stars 70 forks source link

Problem on iPhone #22

Open phonoarchive opened 8 years ago

phonoarchive commented 8 years ago

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 commented 8 years ago

img_4837

Ciantic commented 7 years ago

This is pretty annoying.

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

cedon commented 7 years ago

@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 commented 7 years ago

@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.