num of lines v2 | Chinese Rule of Eight

todo –

given a that a previous space exists:

usually when we pass the limit with a letter, we shift down to the next line, and keep going with the word after the ‘previous space’.

“abcde fghijk”(‘l’ passed limit)

becomes

“abcde
fghijklmn”

However, there is a case where if the offending letter that went passed the limit has a space for the next value….

for example, given “abc def ghi jkl mno”…

abc def ghi (‘i’ passed limit)

then in this particular situation..

1) we include the offending letter as the previous string
2) break line
3) start next line with space

“abc def ghi”
” jkl mno”

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

$(document).ready(function() {

// test cases

//var TEXT = 'abcdefghijklmnopqrstuvwxyz';

//var TEXT = 'abcdefghijklm abcdefghijklmnopqrstuvwxyz nop';

//var TEXT = 'abc defghijklmnop';

//var TEXT = 'abc defghijklm nop';

//var TEXT = 'abc def ghi jkl mama nop';

//var TEXT = 'def ghi jkl';

//var TEXT = 'lll lll lll lll ll';

//var TEXT = 'lll lll lll lll lll';

//var TEXT = 'a b c d e f g h i j k l m n o p q r s t u v w x y z';

//var TEXT = 'T1_00000001 / 020 - 000 0 0 / haha / lin';

var TEXT = 'T1_00000001 / 020 - 000000 / welcome to your doooom!! / haha 0 001';

// jQuery func

$(window).resize(function() {

$("#para a").text(TEXT);

var para = document.querySelector("#para a");

var font = window.getComputedStyle(para).getPropertyValue('font-family');

font = font.replace(/"/g, ''); // remove all quotes

var fontSize = window.getComputedStyle(para).getPropertyValue('font-size');

fontSize = fontSize.replace(/"/g, ''); // remove all quotes

var styleWidth = $("#para").css("width");

styleWidth = styleWidth.slice(0, styleWidth.length-2);

var temp = new DblLineWithEllipsis(TEXT, $.fn.textWidth, styleWidth, font, fontSize);

var num = temp.calcNumOfLines(font, fontSize);

});

$.fn.textWidth = function(text, font, fontSize) {

if (!$.fn.textWidth.placeholderEl) $.fn.textWidth.placeholderEl

= $('<span>').appendTo(document.body);

var validText = text || this.val() || this.text();

font = font.replace(/"/g, '');

$.fn.textWidth.placeholderEl.text(validText).css({'font-family': font, 'font-size': fontSize});

return $.fn.textWidth.placeholderEl.width();

};

// DblLineWithEllipsis

function DblLineWithEllipsis(newParagraph, calcTextWidthFunc, width, newFont, newFontSize) {

this._paragraph = newParagraph;

this._textWidthFunc = calcTextWidthFunc;

this._font = newFont;

this._fontSize = newFontSize;

this.LIMIT = width

this._paragraphFormat = [];

this._paragraphFormatCur = 0;

this._totalTextWidth = 0;

this._placeHolderInDOM;

}

DblLineWithEllipsis.prototype.getCharWidth = function (str, callback) {

if (str == ' ') {callback(0, true);}

else {callback(this._textWidthFunc(str, this._font, this._fontSize), false);}

}

DblLineWithEllipsis.prototype.textWidthPastLimit = function() {return (this._totalTextWidth >= this.LIMIT);}

DblLineWithEllipsis.prototype.storeString = function(strHolder) {this._paragraphFormat[this._paragraphFormatCur++] = strHolder;}

DblLineWithEllipsis.prototype.charIsSpace = function(ch) {return (ch == ' ');}

DblLineWithEllipsis.prototype.splitHoldStringByLastSpace = function(offendingChar, strHolder) {

var indexOfLastSpace = strHolder.lastIndexOf(' ');

var prev = strHolder.slice(0, indexOfLastSpace+1);

console.log('prev is: ' + prev);

this.storeString(prev);

console.log(this._paragraphFormat);

var next = strHolder.slice(indexOfLastSpace+1, strHolder.length);

console.log('next is: ' + next);

return next;

}

DblLineWithEllipsis.prototype.calculateWidthOfSpace = function(before, after) {

var a = $.fn.textWidth(before, this._font, this._fontSize);

var b = $.fn.textWidth(after, this._font, this._fontSize);

var together = before + ' ' + after;

var c = $.fn.textWidth(together, this._font, this._fontSize);

return (c-b-a);

}

DblLineWithEllipsis.prototype.calcNumOfLines = function() {

console.log('limit: ' + this.LIMIT);

var characterArray = this._paragraph.split('');

var holder = "";

var previousSpaceExists;

var self = this;

for (var i = 0; i < characterArray.length; i++) {

this.getCharWidth(characterArray[i], function(width, isSpace) {

if (isSpace && width==0) {

previousSpaceExists = true;

width = self.calculateWidthOfSpace(self._paragraph[i-1], self._paragraph[i+1]);

}

self._totalTextWidth += width;

console.log("adding " + characterArray[i] + " width of " + width + ", total is: " + self._totalTextWidth);

});

holder += characterArray[i];

if (this.textWidthPastLimit()) {

console.log('past limit with char |' + characterArray[i]+'|');

if (this.charIsSpace(characterArray[i])) {

this.storeString(holder);

holder = '';

this._totalTextWidth = 0;

} else if (previousSpaceExists) {

previousSpaceExists = false;

console.log("|"+holder+"|");

holder = this.splitHoldStringByLastSpace(characterArray[i], holder);

this._totalTextWidth = this._textWidthFunc(holder, this._font, this._fontSize);

console.log('continuing on with width: ' + this._totalTextWidth);

}

this.storeString(holder);

console.log(this._paragraphFormat);

return this._paragraphFormat.length;

}

$("#para a").text(TEXT);

var para = document.querySelector("#para a");

var font = window.getComputedStyle(para).getPropertyValue('font-family');

font = font.replace(/"/g, ''); // remove all quotes

var fontSize = window.getComputedStyle(para).getPropertyValue('font-size');

fontSize = fontSize.replace(/"/g, ''); // remove all quotes

var styleWidth = $("#para").css("width");

styleWidth = styleWidth.slice(0, styleWidth.length-2);

var temp = new DblLineWithEllipsis(TEXT, $.fn.textWidth, styleWidth, font, fontSize);

var num = temp.calcNumOfLines(font, fontSize);

});

html

<!DOCTYPE html>

<head>

<title>Number of lines in a paragraph when squished into an element</title>

<style>

#para {width: 20%;}

</style>

<body>

</div>

</body>

</html>