commit e414273d0b480a00d76519dace8d4d23dfbe0e08
parent ef534cf1ea86f67f11906d5c0a093d8ee7d0a8e5
Author: Andy Herbert <andy.herbert@gmail.com>
Date: Tue, 29 Oct 2013 21:08:48 +0000
Added documentation on aligning multiple canvas elements correctly.
Diffstat:
2 files changed, 5 insertions(+), 1 deletion(-)
diff --git a/README.md b/README.md
@@ -51,8 +51,11 @@ Ansilove.js has been tested on Safari, Firefox, and Chrome. Results may vary wid
For extremely large files, which may silently fail on some browsers when producing a single canvas element, the `splitRender` function will produce an array of canvas elements, which can then be stacked vertically in the browser to simulate a single, contiguous display. The value of `27` in the following example is the maximum amount of text-rows in used in each element.
+When aligning these elements on a page there may be a small gap between each image. To correct this, simply apply the CSS style `vertical-align: bottom`, or apply it progmatically with a single line of Javascript.
+
AnsiLove.splitRender("long_ansi.ans", function (canvases, sauce) {
canvases.forEach(function (canvas) {
+ canvas.style.verticalAlign = "bottom"; // For perfect, gap-less viewing.
document.body.appendChild(canvas);
});
console.log(sauce);
diff --git a/example/example_usage.ans b/example/example_usage.ans
@@ -8,7 +8,8 @@
[0;1;40;37m[?33hAnsilove.[35msplitRender[0m([32m"long_ansi.ans"[37m, [1;33mfunction [37m([0mcanvases[1m, [0msauce[1m) {
canvases.[35mforEach[37m([1;33mfunction [37m([0mcanvas[1m) {
- document.[35mgetElementById[37m([0;32m"ansi-container"[1;37m).[35mappendChild[37m([0mcanvas[1m);
+ canvas.[35mstyle[37m.[35mverticalAlign [37m= [0;32m"bottom"; [37m// For perfect, gap-less viewing
+ [1mdocument.[35mgetElementById[37m([0;32m"ansi-container"[1;37m).[35mappendChild[37m([0mcanvas[1m);
});
[33mconsole[37m.log(sauce);
}, [31m27[37m, {[0;32m"bits"[1;37m: [0;32m"8"[1;37m});