For users to enter their name, you need a text box. You will also need a button that launches a Javascript function that checks the value of the text field and displays the letters.
You can use the following code to create letters. You will need a text box with an id and div text box to display the results with the identifier 'output', which you can change. I recommend using the select element to store template parameters (#patternChooser in this example)
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); } }
You can use the following CSS to apply some positioning to the letters (adjust the c value and the height relative to your images):
#output div { margin-left: 10px; width: 50px; height: 100px; float: left; }
You will need to name your images as follows: flowerpattern_a.png, brickpattern_j.png, etc.
If you want the letters to be displayed in real time, you can use Javascript onkeyup () to run a function that checks the last character of a text field and creates an element for it.
Sprites
You can also use a sprite to improve performance. Put all images for letters in one image. You set this image as the background for each letter. Quick reading of CSS sprites: http://css-tricks.com/css-sprites/ You can add background-image: url(sprite.png); into the CSS snippet above. Instead of just setting backgroundImage with Javascript, you will need to set the background position of the letter ( letter.style.background-position = '100px 200px' )
Font Attachment
If you have fonts to use: there are many options for embedding fonts, such as Typeface and Cufon . I think that the most enjoyable for work is the use of the font. It is fast and the text will behave like any other text.
If you received your .TTF Truetype font, you will need to convert the font to .EOT for use with Internet Explorer. You can also add SVG fonts for full browser coverage. This is actually very simple: you simply add the following snippet to the top of your stylesheet as follows:
@font-face { font-family: 'GothicCustom'; src: url("LeagueGothic.eot"); src: local('League Gothic'), url("LeagueGothic.svg#lg") format('svg'), url("LeagueGothic.otf") format('opentype'); }
The advantage of this technique is that it is easy to use, and you have full control over the rendered text, like any other text on your site. You can set the font size, the distance between letters, etc. It reads well here about embedding font font fonts . You can use Microsoft WEFT or TTF2EOT to create .EOT fonts.
For example, your code might look like this.
Javascript
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; } }
HTML
<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>
CSS
@font-face { font-family: 'Decorative'; src: url("decorative.eot"); src: local('Decorative'), url("Decorative.svg#lg") format('svg'), url("Decorative.otf") format('opentype'); }
Now it remains only to convert the fonts and import them into the stylesheet.
Of course, you can go with any other font embedding method. Here's an article on font embedding options , but a quick Google will also show you options.