For a use case like pdf generation.
You can limit to characters per line, if a split occurs middle word, adjust appropriately.
To gain a more accurate characters per line you can use monospaced fonts then determine the width per character for each font allowed. Then divide the character width by the size of the allowed text line width, and you'll have the allowed characters per line for that font.
You could use non monospaced fonts, but then you'll have to measure each letter's width - ugh. A way you can automate the width guessing is having a span that has no margin or padding, add in each character for each font (and size) then measure the width of the span and use that.
I've done up the code:
/**
* jQuery getFontSizeCharObject
* @version 1.0.0
* @date September 18, 2010
* @since 1.0.0, September 18, 2010
* @package jquery-sparkle {@link http://www.balupton/projects/jquery-sparkle}
* @author Benjamin "balupton" Lupton {@link http://www.balupton.com}
* @copyright (c) 2010 Benjamin Arthur Lupton {@link http://www.balupton.com}
* @license Attribution-ShareAlike 2.5 Generic {@link http://creativecommons.org/licenses/by-sa/2.5/
*/
$.getFontSizeCharObject = function(fonts,sizes,chars){
var fonts = fonts||['Arial','Times'],
sizes = sizes||['12px','14px'],
chars = chars||['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','y','x','z',
'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','Y','X','Z',
'0','1','2','3','4','5','6','7','8','9','-','=',
'!','@','#','$','%','^','&','*','(',')','_','+',
'[',']','{','}','\\','|',
';',"'",':','"',
',','.','/','<','>','?',' '],
font_size_char = {},
$body = $('body'),
$span = $('<span style="padding:0;margin:0;letter-spacing:0:word-spacing:0"/>').appendTo($body);
$.each(fonts, function(i,font){
$span.css('font-family', font);
font_size_char[font] = font_size_char[font]||{};
$.each(sizes, function(i,size){
$span.css('font-size',size);
font_size_char[font][size] = font_size_char[font][size]||{};
$.each(chars,function(i,char){
if ( char === ' ' ) {
$span.html(' ');
}
else {
$span.text(char);
}
var width = $span.width()||0;
font_size_char[font][size][char] = width;
});
});
});
$span.remove();
return font_size_char;
};
/**
* jQuery adjustedText Element Function
* @version 1.0.0
* @date September 18, 2010
* @since 1.0.0, September 18, 2010
* @package jquery-sparkle {@link http://www.balupton/projects/jquery-sparkle}
* @author Benjamin "balupton" Lupton {@link http://www.balupton.com}
* @copyright (c) 2010 Benjamin Arthur Lupton {@link http://www.balupton.com}
* @license Attribution-ShareAlike 2.5 Generic {@link http://creativecommons.org/licenses/by-sa/2.5/
*/
$.fn.adjustedText = function(text,maxLineWidth){
var $this = $(this),
font_size_char = $.getFontSizeCharObject(),
char_width = font_size_char['Times']['14px'],
maxLineWidth = parseInt(maxLineWidth,10),
newlinesAt = [],
lineWidth = 0,
lastSpace = null;
text = text.replace(/\s+/g, ' ');
$.each(text,function(i,char){
var width = char_width[char]||0;
lineWidth += width;
if ( /^[\-\s]$/.test(char) ) {
lastSpace = i;
}
//console.log(i,char,lineWidth,width);
if ( lineWidth >= maxLineWidth ) {
newlinesAt.push(lastSpace||i);
lineWidth = width;
lastSpace = null;
}
});
$.each(newlinesAt,function(i,at){
text = text.substring(0,at+i)+"\n"+text.substring(at+i);
});
text = text.replace(/\ ?\n\ ?/g, "\n");
console.log(text,newlinesAt);
$this.text(text);
return $this;
};
$(function(){
var $body = $('body'),
$textarea = $('#mytext'),
$btn = $('#mybtn'),
$div = $('#mydiv');
if ( $textarea.length === 0 && $div.length === 0 ) {
$body.empty();
$textarea = $('<textarea id="mytext"/>').val('(When spoken repeatedly, often three times in succession: blah blah blah!) Imitative of idle, meaningless talk; used sometimes in a slightly derogatory manner to mock or downplay another\'s words, or to show disinterest in a diatribe, rant, instructions, unsolicited advice, parenting, etc. Also used when recalling and retelling another\'s words, as a substitute for the portions of the speech deemed irrelevant.').appendTo($body);
$div = $('<div id="mydiv"/>').appendTo($body);
$btn = $('<button id="mybtn">Update Div</button>').click(function(){
$div.adjustedText($textarea.val(),'300px');
}).appendTo($body);
$div.add($textarea).css({
'width':'300px',
'font-family': 'Times',
'font-size': '14px'
});
$div.css({
'width':'auto',
'white-space':'pre',
'text-align':'left'
});
}
});
