diff --git a/examples/article/browser-assist.js b/examples/article/browser-assist.js
index d7aa482..3e93034 100644
--- a/examples/article/browser-assist.js
+++ b/examples/article/browser-assist.js
@@ -10,53 +10,20 @@ jQuery(function ($) {
format;
$('body').append(ruler);
+ function measure(str) {
+ if (str !== ' ') {
+ return ruler.text(str).width();
+ } else {
+ return ruler.html(' ').width();
+ }
+ };
+ var ret = typeset(text, measure, 'justify', [350], 3),
+ spans = gen_html(ret),
+ browserAssist = $('#browser-assist').after(''),
+ browserAssistRatio = $('#browser-assist + ul');
- format = Typeset.formatter(function (str) {
- if (str !== ' ') {
- return ruler.text(str).width();
- } else {
- return ruler.html(' ').width();
- }
- });
-
- function browserAssistTypeset(identifier, text, type, lineLengths, tolerance) {
- var nodes = format[type](text),
- breaks = Typeset.linebreak(nodes, lineLengths, {tolerance: tolerance}),
- lines = [],
- i, point, r, lineStart,
- browserAssist = $(identifier).after(''),
- browserAssistRatio = $(identifier + ' + ul');
-
- // Iterate through the line breaks, and split the nodes at the
- // correct point.
- for (i = 1; i < breaks.length; i += 1) {
- point = breaks[i].position,
- r = breaks[i].ratio;
-
- for (var j = lineStart; j < nodes.length; j += 1) {
- // After a line break, we skip any nodes unless they are boxes or forced breaks.
- if (nodes[j].type === 'box' || (nodes[j].type === 'penalty' && nodes[j].penalty === -Typeset.linebreak.infinity)) {
- lineStart = j;
- break;
- }
- }
- lines.push({ratio: r, nodes: nodes.slice(lineStart, point + 1), position: point});
- lineStart = point;
- }
-
- lines = lines.map(function (line) {
- var spaceShrink = 1 / 9 * 12,
- spaceStretch = 1 / 6 * 12,
- ratio = line.ratio * (line.ratio < 0 ? spaceShrink : spaceStretch);
-
- var output = '' + line.nodes.filter(function (n) {
- return n.type === 'box';
- }).map(function (n) {
- return n.value;
- }).join(' ') + '';
- browserAssist.append(output);
- browserAssistRatio.append('' + line.ratio.toFixed(3) + '');
- });
- }
- browserAssistTypeset('#browser-assist', text, 'justify', [350], 3);
+ browserAssist.append(spans[0]);
+ browserAssistRatio.append(spans[2].map(function(r) {
+ return ""+r.toFixed(3)+"";
+ }).join(""));
});
diff --git a/examples/article/browser.js b/examples/article/browser.js
index 4d544ca..ae008d3 100644
--- a/examples/article/browser.js
+++ b/examples/article/browser.js
@@ -80,3 +80,78 @@ jQuery(function ($) {
$('#browser').text(text);
browserTypeset();
});
+
+function draw(context, lines, measure, center) {
+ var i = 0, point, j,
+ y = 4, maxLength = 0;
+
+ //if(center)
+ lines.forEach(function(line) {
+ maxLength = maxLength > line.width ? maxLength : line.width;
+ });
+ console.log(lines.length, maxLength);
+
+ lines.forEach(function (line) {
+ const spaceShrink = 12 / 9,
+ spaceStretch = 12 / 6,
+ r = line.ratio * (line.ratio < 0 ? spaceShrink : spaceStretch);
+ var x = 0;
+
+ if (center) {
+ x += (maxLength - line.width) / 2;
+ }
+
+ var words = line.value.split(' ');
+ words.forEach(function(w) {
+ context.fillText(w, x, y);
+ x += measure(w+' ') + r;
+ });
+
+ // move lower to draw the next line
+ y += 21;
+ });
+}
+
+jQuery(function ($) {
+ function align(identifier, type, lineLengths, tolerance, center) {
+ var canvas = $(identifier).get(0),
+ context = canvas.getContext && canvas.getContext('2d'),
+ format, nodes, breaks;
+ if (!context) {
+ canvas.text("Unable to render to Canvas.");
+ return;
+ }
+ context.textBaseline = 'top';
+ context.font = "14px 'times new roman', 'FreeSerif', serif";
+
+ function measure(str) {
+ return context.measureText(str).width;
+ };
+
+ var ret = typeset(text, measure, type, lineLengths, tolerance);
+
+ if (ret.length !== 0) {
+ draw(context, ret, measure, center);
+ } else {
+ context.fillText('Paragraph can not be set with the given tolerance.', 0, 0);
+ }
+ }
+
+ var r = [],
+ radius = 147;
+
+ for (var j = 0; j < radius * 2; j += 21) {
+ r.push(Math.round(Math.sqrt((radius - j / 2) * (8 * j))));
+ }
+
+ r = r.filter(function (v) {
+ return v > 30;
+ });
+
+ align('#center', 'center', [350], 3);
+ align('#left', 'left', [350], 4);
+ align('#flow', 'justify', [350, 350, 350, 200, 200, 200, 200, 200, 200, 200, 350, 350], 3);
+ align('#triangle', 'justify', [50, 100, 150, 200, 250, 300, 350, 400, 450, 500, 550], 3, true);
+ align('#circle', 'justify', r, 3, true);
+});
+
diff --git a/examples/article/index.html b/examples/article/index.html
index d10bd2b..c8ef409 100644
--- a/examples/article/index.html
+++ b/examples/article/index.html
@@ -107,115 +107,28 @@ References
-
-
+
+
+
-
-
-
-
+
+
-
-
-
+
+
+
+
+
-
-