ansilove.js

A script to display ANSi and artscene related file formats on web pages
Log | Files | Refs | README | LICENSE

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:
MREADME.md | 3+++
Mexample/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"});