ansilove.js

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:
M
README.md
 | 
3
+++
M
example/example_usage.ans
 | 
3
++-

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 @@
 
 [?33hAnsilove.splitRender("long_ansi.ans", function (canvases, sauce) {
     canvases.forEach(function (canvas) {
-        document.getElementById("ansi-container").appendChild(canvas);
+        canvas.style.verticalAlign = "bottom"; // For perfect, gap-less viewing
+        document.getElementById("ansi-container").appendChild(canvas);
     });
     console.log(sauce);
 }, 27, {"bits": "8"});