StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>For users to be able to type in their own name you'll need a text field. You'll also need a button that fires a Javascript function that checks the value of the text field and renders the letter images.</p> <p>You can use the following code to create the letters. You will need a textfield with the id 'textfield' and a div to render the results in with the id 'output', which ofcourse you can change. I recommend using a select element to store the pattern options (#patternChooser in this example)</p> <pre><code>function renderName() { // Get the name to be rendered and the chosen pattern var text = document.getElementById('textfield').value; var pattern = document.getElementById('patternChooser').value; // Iterate over the name and create an element for each letter for(i = 0; i < text.length; i++) { var letter = document.createElement('div'); letter.style.backgroundImage = 'url(' + pattern + '_' + text[i] + ')'; document.getElementById('output').appendChild(letter); } } </code></pre> <p>You can use the following CSS to apply some positioning to the letters (adjust the with and height to that of your images):</p> <pre><code>#output div { margin-left: 10px; width: 50px; height: 100px; float: left; } </code></pre> <p>You will need to name your images like this: flowerpattern_a.png, brickpattern_j.png, etc.</p> <p>If you want the letters to appear real time you can use Javascript's <a href="https://developer.mozilla.org/en/DOM/element.onkeyup" rel="nofollow noreferrer">onkeyup()</a> to fire a function that checks the last character of the text field's value and creates an element for it.</p> <p><strong>Sprites</strong></p> <p>You can also use a sprite to increase performance. Put all the images for the letters into one image. You set this image as a background for every letter. Quick read on CSS sprites: <a href="http://css-tricks.com/css-sprites/" rel="nofollow noreferrer">http://css-tricks.com/css-sprites/</a> You can add <code>background-image: url(sprite.png);</code> to the CSS snippet above. Instead of just setting a backgroundImage with Javascript, you will need to set the background position of the letter (<code>letter.style.background-position = '100px 200px'</code>)</p> <p><strong>Font embedding</strong></p> <p>If you got fonts to use: there are many font embedding options like <a href="http://typeface.neocracy.org/" rel="nofollow noreferrer">Typeface</a> and <a href="http://cufon.shoqolate.com/generate/" rel="nofollow noreferrer">Cufon</a>. The one I find most pleasant to work with is the use of <em>font-face</em>. It is fast and the text will behave like any other text.</p> <p>If you got your .TTF Truetype font, you'll need to convert the font to .EOT for use with Internet Explorer. You could also add SVG fonts for full browser coverage. It's actually very easy: You just add the following snippet to the top of your stylesheet like this:</p> <pre><code>@font-face { font-family: 'GothicCustom'; src: url("LeagueGothic.eot"); src: local('League Gothic'), url("LeagueGothic.svg#lg") format('svg'), url("LeagueGothic.otf") format('opentype'); } </code></pre> <p>The advantage of this technique is that it's easy to use and you got full controll over the rendered text, like any other text on your website. You can set the font-size, letter-spacing etc. <a href="http://snook.ca/archives/html_and_css/becoming-a-font-embedding-master" rel="nofollow noreferrer">Here's a good read about font-face font embedding</a>. You can use <a href="http://msdn.microsoft.com/en-us/library/ms530303(VS.85).aspx" rel="nofollow noreferrer">Microsoft WEFT</a> or <a href="http://code.google.com/p/ttf2eot/" rel="nofollow noreferrer">TTF2EOT</a> to create .EOT fonts.</p> <p>For example, your code could look like this.</p> <p><strong><em>Javascript</em></strong></p> <pre><code>function renderName() { // Get the name to be rendered and the chosen pattern var text = document.getElementById('textfield').value; var pattern = document.getElementById('patternChooser').value; // Render the text with a class for(i = 0; i < text.length; i++) { var output = document.getElementById('output'); output.style.fontFamily = pattern; output.innerHTML = text; } } </code></pre> <p><strong><em>HTML</em></strong></p> <pre><code><form> <input id="textfield" type="text" /> <select id="patternChooser"> <option>Flowers</option> <option>Brick</option> <option>Decorative</option> </select> <input type="button" onclick="renderName()" /> </form> <div id="output"></div> </code></pre> <p><strong><em>CSS</em></strong></p> <pre><code>@font-face { font-family: 'Decorative'; src: url("decorative.eot"); src: local('Decorative'), url("Decorative.svg#lg") format('svg'), url("Decorative.otf") format('opentype'); } </code></pre> <p>Now the only thing that is left is converting the fonts and import them in your stylesheet.</p> <p>Ofcourse you can choose to go with any other font-embedding method. <a href="http://zomigi.com/blog/roundup-of-font-embedding-and-replacement-techniques/" rel="nofollow noreferrer">Here's an article about font-embedding options</a> but a quick Google will show you the options as well.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload