I have a unique way of showcasing content in a preview format by utilizing em units for scaling and adjusting the root font size to increase or decrease. When users click on the preview, the full content is revealed with an animation that scales the font size up to 100%. Here's a link to see it in action: http://jsfiddle.net/5fCd5/3/
Essentially:
CSS:
.example section {
font-size: 30%;
}
JS:
zoomed.animate({
fontSize: '100%'
});
To enhance the user experience, I incorporate jQuery to smoothly scale the text. However, during this transition, different browsers handle text wrapping at varying points due to rendering differences. This discrepancy can be more pronounced in Chrome compared to Firefox, while IE10 maintains consistent wrapping throughout the animation process.
If you have any suggestions for resolving these issues or implementing workarounds, please share them.
Initially, one workaround I considered involves creating the preview at 100% font size, breaking down the text into individual words, gradually adding them to the container to adjust its height, then identifying each line break and applying specific formatting properties. However, since my previews include arbitrary HTML elements like images sized in em units, this solution might not be practical.