Interaction with ::first-letter CSS "drop caps" effect
stdjon opened this issue · comments
When trying to hyphenate text using a "drop caps" effect, It seems that hypher can be made to interact with the CSS ::first-letter pseudo element in an unintuitive way, causing the first letter of every paragraph to be omitted:
<html>
<head>
<style>
body {
margin: 24px;
width: 300px;
}
p::first-letter {
font-size: 2.8em;
line-height: 1em;
margin-right: 2px;
display: block;
float: left;
}
</style>
</head>
<body>
<h3>Hyphenation but missing Drop Caps</h3>
<p>Quisque pharetra velit id velit iaculis pretium. Nullam a justo sed ligula porta semper eu quis enim. Pellentesque pellentesque, metus at facilisis hendrerit, lectus velit facilisis leo, quis volutpat turpis arcu quis enim. Nulla viverra lorem elementum interdum ultricies.</p>
<p>Ut ut risus nisl. Fusce porttitor eros at magna luctus, non congue nulla eleifend. Aenean porttitor feugiat dolor sit amet facilisis. Pellentesque venenatis magna et risus commodo, a commodo turpis gravida. Nam mollis massa dapibus urna aliquet, quis iaculis elit sodales.</p>
<p>Integer pulvinar leo id risus pellentesque vestibulum. Sed diam libero, sodales eget sapien vel, porttitor bibendum enim. Donec sed nibh vitae lorem porttitor blandit in nec ante. Pellentesque vitae metus ipsum. Phasellus sed nunc ac sem malesuada condimentum.</p>
<p>Nullam hendrerit justo non leo aliquet imperdiet. Etiam in sagittis lectus. Suspendisse ultrices placerat accumsan. Mauris quis dapibus orci. In dapibus velit blandit pharetra tincidunt. Quisque non sapien nec lacus condimentum facilisis ut iaculis enim.</p>
<script src="jquery-1.11.2.js"></script>
<script src="jquery.hypher.js"></script>
<script src="en-gb.js"></script>
<script>
$(document).ready(function() {
$('p').hyphenate('en-gb');
});
</script>
</body>
</html>
A workaround is to apply the "drop caps" CSS dynamically after $().hyphanate() has been run, as in this example:
<html>
<head>
<style>
body {
margin: 24px;
width: 300px;
}
</style>
</head>
<body>
<h3>Desired Result</h3>
<p>Quisque pharetra velit id velit iaculis pretium. Nullam a justo sed ligula porta semper eu quis enim. Pellentesque pellentesque, metus at facilisis hendrerit, lectus velit facilisis leo, quis volutpat turpis arcu quis enim. Nulla viverra lorem elementum interdum ultricies.</p>
<p>Ut ut risus nisl. Fusce porttitor eros at magna luctus, non congue nulla eleifend. Aenean porttitor feugiat dolor sit amet facilisis. Pellentesque venenatis magna et risus commodo, a commodo turpis gravida. Nam mollis massa dapibus urna aliquet, quis iaculis elit sodales.</p>
<p>Integer pulvinar leo id risus pellentesque vestibulum. Sed diam libero, sodales eget sapien vel, porttitor bibendum enim. Donec sed nibh vitae lorem porttitor blandit in nec ante. Pellentesque vitae metus ipsum. Phasellus sed nunc ac sem malesuada condimentum.</p>
<p>Nullam hendrerit justo non leo aliquet imperdiet. Etiam in sagittis lectus. Suspendisse ultrices placerat accumsan. Mauris quis dapibus orci. In dapibus velit blandit pharetra tincidunt. Quisque non sapien nec lacus condimentum facilisis ut iaculis enim.</p>
<script src="jquery-1.11.2.js"></script>
<script src="jquery.hypher.js"></script>
<script src="en-gb.js"></script>
<script>
$(document).ready(function() {
$('p').hyphenate('en-gb');
$('head').append(
'<style id="second" type="text/css"></style>')
$('#second').text(
'p::first-letter {\n' +
'font-size: 2.8em;\n' +
'line-height: 1em;\n' +
'margin-right: 2px;\n' +
'display: block;\n' +
'float: left;\n' +
'}\n\n');
});
</script>
</body>
</html>
It's a somewhat odd usecase, and I'm not 100% sure if there's anything which can be done about this, but I figured I'd report it anyway.