I've found a way to make it work for any line-height the user specify on their device
Here's an example for 3 lines:
HTML
<p><span class="dropcaps"><br/><span class="three">L</span></span><br/>orem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam a nunc ac nibh venenatis aliquet. Cras posuere, dolor eget aliquet lobortis, lorem quam viverra purus, non pretium urna tortor ac neque. Fusce iaculis justo eget luctus mattis. Pellentesque finibus nisi eu aliquam porta. Nam ut pharetra ligula, eget venenatis ex. Ut vel urna elementum, tincidunt quam at, auctor ipsum. Suspendisse sagittis metus non ante ultrices lacinia. Morbi quis orci erat. Mauris sed sapien maximus, aliquam mauris sed, ornare ante. Donec in ultricies sapien, sed aliquam est. Vivamus tristique sapien a dolor tincidunt tempor. Cras pretium sagittis nulla, in suscipit libero feugiat auctor. In ac dui id velit porta aliquam eget vitae eros.</p>
CSS
@charset "utf-8";
*{margin:0%;padding:0%;border-width:0;}
html, body{height:100%;}
body *{line-height:inherit;}
p{text-align:justify;}
.dropcaps{
float:left;
}
.three{
font-size:2.916666666666667em;
}
Come on, people of the world! Let's find out together how to make this Drop Caps work on all devices!!!
