Responsive font sizing in HTML with consistent soft wraps
I have a page with some boxes (divs). The boxes dimensions are based on a percentage of the viewport size. Inside these boxes are varying amounts of text. I have written a function that tries different font-sizes until the text fits well within each box. A box with more text gets a smaller "em" font-size.
I have also loaded a plugin which changes my body's font-size based on it's width.
For the most part it works well, except for certain pieces of text sometimes I get glitches with line wraps. As I resize the page, sometimes the font is adjusted by a fraction of a px, which is enough to push the text onto a new line so it wraps at different points.
Is there some way to responsively resize my text while ensuring the text wraps at consistent points?
Here are some examples...
https://jsfiddle.net/geu643h9/
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
/*
* FlowType.JS v1.1
* Copyright 2013-2014, Simple Focus http://simplefocus.com/
*/
(function($) {
$.fn.flowtype = function(options) {
var settings = $.extend({
maximum : 9999,
minimum : 1,
maxFont : 9999,
minFont : 1,
fontRatio : 35
}, options),
changes = function(el) {
var $el = $(el);
var elw = $el.width();
var width = elw > settings.maximum ? settings.maximum : elw < settings.minimum ? settings.minimum : elw;
var fontBase = width / settings.fontRatio;
var fontSize = fontBase > settings.maxFont ? settings.maxFont : fontBase < settings.minFont ? settings.minFont : fontBase;
$el.css('font-size', fontSize + 'px');
};
return this.each(function() {
var that = this;
$(window).resize(function(){changes(that);});
changes(this);
});
};
}(jQuery));
</script>
<div id="flowtype">
<div style="font-size:1em; position:fixed; left:5; right:45%;">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
<div style="font-size:0.93em; position:fixed; left:55%; right:5%;">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>
<script>
$('#flowtype').flowtype();
</script>
In this example, there are 2 boxes each consuming half the page. In the left, the text is at 1em, in the right its at 0.93em. As you resize the page both texts jump around & wrap at different points. Especially the right hand one. If you're not replicating the issue, try to resize very slowly. Sometimes it only happens at specific points.
http://simplefocus.com/flowtype/ The same issue happens on the above link, particularly in the 2nd & 3rd paragraphs.
I'm thinking that the only solution would be to somehow append one character at a time to a div, as the height changes I know the character caused a wrap, I can then back up & insert a hard wrap at that point or prior to it, and hopefully avoid letting the browser automatically decide where to place soft wraps. This seems hacky though, what are my options?
Basically I want to write a bunch of text to a div, then resize that div around like I'm scaling text inside an image. The text would not reflow as the sizes change, but would stretch while maintaining aspect ratio. I already tried CSS matrix transforms. It just scales the div, leaving the text inside to reflow to the new dimensions. Would the only option be to literally store the text into an image? Something with canvases? SVG? What are the options?
Edit: Further clarification - this is not specific to "em". Here I've hard coded the font-size to 16.1px, which is right on the cusp of where it happens to wrap. Increasing the font-size to 16.2px by editing it in the inspector pushes it over the edge, and changes the wrapping:
16.1px
16.2px
上一篇: 在相对容器中动态减小字体大小