typewrite
v1.0.0
Published
Adds typewriter scrolling to textareas (text moves up, caret does not)
Downloads
4
Readme
typewrite
typewrite
adds typewriter scrolling to a textarea.
About typewriter scrolling
Typewriter scrolling keeps a user's caret at a constant y-position on the screen. When the user types text preceding the caret moves up, as on a typewriter, instead of the caret moving down. This ensures the user never has to type at the bottom edge of the screen and can always view the text immediately surrounding the caret on either side. Most dedicated prose editors (e.g., WriteRoom, Scrivener, Ulysses) have typewriter scrolling options.
Example
<textarea></textarea>
var typewrite = require('typewrite');
var textarea = document.querySelector("textarea");
typewrite(textarea);
(Use browserify or equivalent to require npm modules in web apps.)
Autosize
typewrite
depends on autosizing textareas. I might fix that later, but for now if you don't want autosize, just wrapping your textarea
in a div with overflow-y:auto
should work.
Options
The second argument to typewrite()
may be an options object:
typewrite(textareaElement, {
scrollingCutoff: 0.7,
bottomMarginSize: 0.3
});
scrollingCutoff
Default: 0.7
Controls the y-coordinate below which to enable typewriter scrolling. Function accepting the container height and the caret position (in pixels) and returning true or false.
// typewriter scrolling enabled when caret is in the bottom 30% of the container
options.scrollingCutoff = function(caretYPosition, writingAreaHeight) {
return caretYPosition / writingAreaHeight > 0.7;
};
scrollingCutoff can also be a number indicating the fraction of the container height below which scrolling should be enabled.
// typewriter scrolling enabled when caret is in the bottom 30% of the container
options.scrollingCutoff = 0.7;
bottomMarginSize
Default: 0.3
Controls the size of the blank space after the last line. Function accepting the container height and returning a number in pixels.
// space will be 30% of the container height
options.bottomMarginSize = function(containerHeight) {
return containerHeight * 0.3;
}
bottomMarginSize can also be a number indicating the fraction of the height of the container the space should be.
// space will be 30% of the container height
options.bottomMarginSize = 0.3;