big wordsIf you’ve ever been moderating a presentation and need a way to quickly throw up a big message on the screen, here is the online tool you need. Echo is a super-simple program that takes a word or short phrase and builds a web page with nothing but your text, sized to fill the screen.

To use it, just enter your text at the end of the URL, like:

goodmorningYou can change the colors by pressing keys on the keyboard (for now, just 1 through 0, and Q/W/E). You can go directly to the color choice by appending a hashtag and the keystroke to the end of the URL. Most browsers will let you enter spaces in the URL, but to share the URL they will have to be converted to the %20 code (see Percent-encoding). To create multiple lines, use the slash.

Use this to quickly throw up a simple message on the screen, such as a topic, a twitter handle, and email, or short instructions.

The Code

Scaling web content to fit the user’s screen is known as responsive web design (and sometimes fluid design). But there is no pure-CSS solution for this. I created my own simple approach to re-sizing a block of text to fit the screen.

var obj = document.getElementById("x"); 
obj.innerHTML = "YOUR TEXT HERE"; 
// take a first stab at the font size
var fontsize = 36;
obj.style.fontSize = fontsize + "px";
obj.style.lineHeight = fontsize + "px";
fontsize *= Math.min(window.innerWidth/obj.offsetWidth, window.innerHeight/obj.offsetHeight);
obj.style.fontSize = fontsize + "px";
obj.style.lineHeight = fontsize + "px";
// center the text
obj.style.top = Math.round((window.innerHeight - obj.offsetHeight)/2) + "px"; 
obj.style.left = Math.round((window.innerWidth - obj.offsetWidth)/2) + "px";

The code works by first drawing the text so that its width and height can be measured. It doesn’t matter when size we draw it at (I chose 36px), because we will soon be changing the font size anyways. I look at how big it would have to be scaled horizontally to fit the screen’s width, and vertically to fit the screen’s height. I use the small number so that the text doesn’t flow over the border.

merry christmasYou can create a margin by subtracting from the window’s innerWidth and innerHeight values.

One big problem is that if the text is not rendered by the time the font size scaling calculation is made, the code won’t work. Since there doesn’t seem to be a “fully rendered” event in JavaScript, I separated the code with a setTimeout call, waiting 300 milliseconds.

Changing the colors done using CSS custom classes. Each color combination has a custom class. To change which one is used, just access the DOM in JavaScript, like:

document.getElementById("bod").className = "halloween";

This is a simple utility that lets you quickly create short messages in your browser using the biggest font possible.

Online Tool to Make a One-Page Slide

Leave a Reply