既知のサイズのコンテナ内でブラウザが1行に表示する文字数を把握する方法はありますか？したがって、既知の寸法の長方形recXとrecY、が事前定義されFONT_SIZEてい13ます。
私は次のように段落の高さを計算しようとしています：
- に分割
rectXしFONT_SIZEて、1行に表示される文字数を取得します。 - 段落の長さ（文字数）を幅で割って行数を取得し、それをに掛けて
FONT_SIZE表示の高さを取得します。
問題は、幅が650pxのコンテナ（テストケース）の場合、650/13の結果は50ですが、ブラウザは1行あたり約100文字を表示し、デフォルトに固執しないことです。私はを使用してfont-family:Lucida Console Monospace 13px, line-height:1emいます。
コード
var width = Math.floor(this.articleSize.width / this.FONT_SIZE);
// this.article.paragraphs is an array of paragraphs without <p> or </p>.
for (var i = 0, ii = this.article.paragraphs.length; i < ii; i++) {
// based on the above compute the height/number of rows for each paragraph.
// This is a basic matrix approach.
// For those of you not familiar with the Closure Library, the goog.math.Size obj
// is a (width, height) object.
this.article.sizes[i] = new goog.math.Size(width, Math.ceil(this.article.paragraphs[i].length / width * this.FONT_SIZE));
};
var i = 0, currentPage = 0, pg = [], height = this.articleSize.height - 20, ii = this.article.paragraphs.length;
while (i < ii) {
// So here based on the height I am trying to see how many paragraphs
// Can fit into one 'page'. The navigation is horizontal, with a book like
// animation.
if((height - this.article.sizes[i].height) > 0) {
pg.push('<p>' + this.article.paragraphs[i] + '</p>');
height -= this.article.sizes[i].height;
i++;
} else {
this.article.pages[currentPage] = pg;
currentPage++;
pg = [];
height = this.articleSize.height - 20;
};
};
これは、任意の解像度/ビューポートサイズで機能する必要があります。つまり、ページは実行時に計算され、50ピクセルを超える現在のサイズとは異なるサイズ変更のたびにプロセス全体が再度実行されます。
これが回避策です
project.MainArticle.loader.prototype.divideText = function(articleText) {
articleText = goog.string.collapseWhitespace(articleText);
articleText = articleText.replace(/<p><\/p>|• Comments will be turned on later/g, '').replace(/<p>\.<\/p>/g, '');
var trick = articleText.replace(/<p>/g, '<p class = \'trick-p\'>');
this.articleTextContainer.innerHTML = trick;
this.preAppendedParagraphs = goog.dom.getElementsByClass('trick-p');
for(var i = 0, ii = this.preAppendedParagraphs.length; i < ii; i++) {
this.article.sizes.push(+(this.preAppendedParagraphs[i]['offsetHeight'] + 10));
};
this.articleTextContainer.innerHTML = '';
this.article.paragraphs = articleText.replace(/<p>/g, '').split('</p>');
};
/**
* Divide the text into pages
* @private
*/
project.loader.prototype.createPages_ = function() {
var i = 0, currentPage = 0, pg = [], height = this.articleSize.height, ii = this.article.paragraphs.length - 1;
while(i < ii) {
if((height - this.article.sizes[i]) >= 0) {
pg.push('<p class=\'nz-ma-txt-p\'>' + this.article.paragraphs[i] + '</p>');
height -= this.article.sizes[i];
i++;
} else {
this.article.pages[currentPage] = pg;
currentPage++;
pg = [];
height = this.articleSize.height;
};
};
console.log(this.article);
};
