Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Refactored code for use as a library. #23

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Refactored code for use as a library. #23

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ffe8bef
Refactored code for use as a library.
frobnitzem Mar 19, 2017
b13bc8a
Fixed flatland demo.
frobnitzem Mar 19, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
63 changes: 15 additions & 48 deletions examples/article/browser-assist.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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('<ul></ul>'),
browserAssistRatio = $('#browser-assist + ul');

format = Typeset.formatter(function (str) {
if (str !== ' ') {
return ruler.text(str).width();
} else {
return ruler.html('&nbsp;').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('<ul></ul>'),
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 = '<span style="word-spacing: ' + ratio.toFixed(3) + 'px; display: inline-block; white-space: nowrap;">' + line.nodes.filter(function (n) {
return n.type === 'box';
}).map(function (n) {
return n.value;
}).join(' ') + '</span>';
browserAssist.append(output);
browserAssistRatio.append('<li>' + line.ratio.toFixed(3) + '</li>');
});
}
browserAssistTypeset('#browser-assist', text, 'justify', [350], 3);
browserAssist.append(spans[0]);
browserAssistRatio.append(spans[2].map(function(r) {
return "<li>"+r.toFixed(3)+"</li>";
}).join(""));
});
75 changes: 75 additions & 0 deletions examples/article/browser.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
});

129 changes: 21 additions & 108 deletions examples/article/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,115 +107,28 @@ <h2>References</h2>
<span style="font-family: sans-serif; font-size: 12px;" id="test">&nbsp;</span>

<script type="text/javascript" src="../../lib/jquery-1.4.2.js"></script>
<script type="text/javascript" src="../../src/linked-list.js"></script>
<script type="text/javascript" src="../../src/linebreak.js"></script>
<script type="text/javascript" src="../../src/linked-list.js"></script>
<script type="text/javascript" src="../../src/patterns.js"></script>
<script type="text/javascript" src="../../src/hypher.js"></script>
<script type="text/javascript" src="../../src/formatter.js"></script>
<script type="text/javascript" src="../../lib/hypher.js"></script>
<script type="text/javascript" src="../../lib/en-us.js"></script>
<script type="text/javascript" src="browser.js"></script>
<script type="text/javascript" src="browser-assist.js"></script>
<script type="text/javascript" src="../../src/linebreak.js"></script>
<script type="text/javascript" src="../../src/typeset.js"></script>
<script type="text/javascript">
var text = "In olden times when wishing still helped one, there lived a king whose daughters were all beautiful; and the youngest was so beautiful that the sun itself, which has seen so much, was astonished whenever it shone in her face. Close by the king's castle lay a great dark forest, and under an old lime-tree in the forest was a well, and when the day was very warm, the king's child went out to the forest and sat down by the fountain; and when she was bored she took a golden ball, and threw it up on high and caught it; and this ball was her favorite plaything."

function draw(context, nodes, breaks, lineLengths, center) {
var i = 0, lines = [], point, j, r, lineStart = 0, y = 4, maxLength = Math.max.apply(null, lineLengths);

// 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.forEach(function (line, lineIndex) {
var x = 0, lineLength = lineIndex < lineLengths.length ? lineLengths[lineIndex] : lineLengths[lineLengths.length - 1];

if (center) {
x += (maxLength - lineLength) / 2;
}

line.nodes.forEach(function (node, index, array) {
if (node.type === 'box') {
context.fillText(node.value, x, y);
x += node.width;
} else if (node.type === 'glue') {
x += node.width + line.ratio * (line.ratio < 0 ? node.shrink : node.stretch);
} else if (node.type === 'penalty' && node.penalty === 100 && index === array.length - 1) {
context.fillText('-', x, y);
}
});

// 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) {
context.textBaseline = 'top';
context.font = "14px 'times new roman', 'FreeSerif', serif";

format = Typeset.formatter(function (str) {
return context.measureText(str).width;
});

nodes = format[type](text);

breaks = Typeset.linebreak(nodes, lineLengths, {tolerance: tolerance});

if (breaks.length !== 0) {
draw(context, nodes, breaks, lineLengths, center);
} else {
context.fillText('Paragraph can not be set with the given tolerance.', 0, 0);
}
}
return [];
}

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);
});
</script>

<!-- Google Analytics -->
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
</script>
<script type="text/javascript" src="browser.js"></script>
<script type="text/javascript" src="browser-assist.js"></script>
<!-- Google Analytics -->
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-10076742-1");
pageTracker._trackPageview();
} catch(err) {
}
</script>
</body>
</html>
try {
var pageTracker = _gat._getTracker("UA-10076742-1");
pageTracker._trackPageview();
} catch(err) {
}
</script>
</body>
</html>
6 changes: 6 additions & 0 deletions examples/article/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,12 @@ body {
background-color: #F9F9F4;
}

.line {
vertical-align: top;
display: inline-block;
white-space: nowrap; }


canvas {
margin-left: auto;
margin-right: auto;
Expand Down
34 changes: 17 additions & 17 deletions examples/flatland/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,21 +58,21 @@ <h3>§ 2. — <span>Of the Climate and Houses in Flatland</span></h3>
</div>
</div>
<script type="text/javascript" src="../../src/linked-list.js"></script>
<script type="text/javascript" src="../../src/patterns.js"></script>
<script type="text/javascript" src="../../src/hypher.js"></script>
<script type="text/javascript" src="../../src/formatter.js"></script>
<script type="text/javascript" src="../../src/linebreak.js"></script>
<script type="text/javascript" src="../../lib/hypher.js"></script>
<script type="text/javascript" src="../../lib/en-us.js"></script>
<script type="text/javascript" src="../../src/typeset.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function ($) {
var lineLength = 0,
lineHeight = 0,
lineLengths = [],
tmp, ruler,
h = new Hypher(Hypher.en),
h = new Hypher("en-us"),
cache = {};

var linebreak = Typeset.linebreak;

function measureString(str) {
if (!cache[str]) {
ruler[0].firstChild.nodeValue = str;
Expand Down Expand Up @@ -126,7 +126,7 @@ <h3>§ 2. — <span>Of the Climate and Houses in Flatland</span></h3>
paragraph = $(element);

if (index !== 0) {
nodes.push(linebreak.box(30, ''));
nodes.push(LineBreak.box(30, ''));
}

words = paragraph.text().split(/\s/);
Expand All @@ -139,32 +139,32 @@ <h3>§ 2. — <span>Of the Climate and Houses in Flatland</span></h3>

if (hyphenated.length > 1) {
hyphenated.forEach(function (part, partIndex, partArray) {
nodes.push(linebreak.box(measureString(part), part));
nodes.push(LineBreak.box(measureString(part), part));
if (partIndex !== partArray.length - 1) {
nodes.push(linebreak.penalty(hyphenWidth, hyphenPenalty, 1));
nodes.push(LineBreak.penalty(hyphenWidth, hyphenPenalty, 1));
}
});
} else {
nodes.push(linebreak.box(measureString(word), word));
nodes.push(LineBreak.box(measureString(word), word));
}

if (index === array.length - 1) {
nodes.push(linebreak.glue(0, linebreak.infinity, 0));
nodes.push(linebreak.penalty(0, -linebreak.infinity, 1));
nodes.push(LineBreak.glue(0, LineBreak.infinity, 0));
nodes.push(LineBreak.penalty(0, -LineBreak.infinity, 1));
} else {
nodes.push(linebreak.glue(space.width, space.stretch, space.shrink));
nodes.push(LineBreak.glue(space.width, space.stretch, space.shrink));
}
});

// Perform the line breaking
breaks = linebreak(nodes, lineLengths.length !== 0 ? lineLengths : [lineLength], {tolerance: 1});
breaks = BreakLines(nodes, lineLengths.length !== 0 ? lineLengths : [lineLength], {tolerance: 1});

// Try again with a higher tolerance if the line breaking failed.
if (breaks.length === 0) {
breaks = linebreak(nodes, lineLengths.length !== 0 ? lineLengths : [lineLength], {tolerance: 2});
breaks = BreakLines(nodes, lineLengths.length !== 0 ? lineLengths : [lineLength], {tolerance: 2});
// And again
if (breaks.length === 0) {
breaks = linebreak(nodes, lineLengths.length !== 0 ? lineLengths : [lineLength], {tolerance: 3});
breaks = BreakLines(nodes, lineLengths.length !== 0 ? lineLengths : [lineLength], {tolerance: 3});
}
}

Expand All @@ -175,7 +175,7 @@ <h3>§ 2. — <span>Of the Climate and Houses in Flatland</span></h3>

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 === -linebreak.infinity)) {
if (nodes[j].type === 'box' || (nodes[j].type === 'penalty' && nodes[j].penalty === -LineBreak.infinity)) {
lineStart = j;
break;
}
Expand Down Expand Up @@ -262,4 +262,4 @@ <h3>§ 2. — <span>Of the Climate and Houses in Flatland</span></h3>
</script>

</body>
</html>
</html>
Loading