Spell Words with Yahoo! Images

Spell Words with Yahoo! Images

Web of Letters combines Yahoo! Image Search results to spell a single word.

The Web of Letters is a PHP script that uses the Yahoo! Image Search API to grab images of letters from all over the Web to spell words. The resultsa combination of photos and illustrationsare always surprising and can even look like modern art. You simply type a word into a web form, and the script assembles the images.

The key to the hack is transforming the user's word into the proper Yahoo! query. When the user enters hello, the code queries Yahoo! Image Search for each letter in the word"letter h", "letter e", "letter l", and so oneventually spelling the complete word, as shown in Figure.

The word "hello" assembled from Yahoo! Images

When the character is a number, the query syntax is "number 1", "number 2", etc. When the character is a symbol, the code queries Yahoo! for its full name; the symbol & becomes ampersand.

You can try a working Web of Letters is at http://blog.outer-court.com/yahoo/letters.php5.

The Code

Web of Letters uses PHP5, and you can start by creating a file called letters.php5. In addition to a standard HTML head, add the following code to accept a query parameter q:

	$q = ( isset($_POST['q']) ) ? $_POST['q'] : '';

Then add the following XHTML snippet, which will ask the user for input:

<form action="letters.php5" method="post"><div>
Enter anything:
<input type="text" size="40" maxlength="40" name="q"
		value="<?= toAttribute($q) ?>" />
<input type="submit" value="Display" />

Print the query in the input box if something has been posted already, but make sure to convert it to an HTML attribute value using the toAttribute function:

function toAttribute($s)
	$s = toXml($s);
	$s = str_replace('"', '&"', $s);
	return $s;

function toXml($s)
	$s = str_replace('&', '&amp;', $s);
	$s = str_replace('<', '&lt;', $s);
	$s = str_replace('>', '&gt;', $s);
	return $s;

The heart of the code shows the images retrieved from Yahoo!.

The script accepts only words of up to 40 letters. It's also wise to implement a cache when you query Yahoo!; "letter b" will be used for every b, but we do not need to query Yahoo every time for this.

	if ($q != '') 
        ?><p style="margin-top: 50px">Spelling 
                  <em><?= toXml($q) ?></em> 
                            (reload for variations):</p><?

		if ( strlen($q) <= 40 )
            for ($i = 0; $i < strlen($q); $i++)

                $letter = substr($q, $i, 1);
				switch ( strtolower($letter) )

                   case '.':

			       case '_':

                   case '-':

                   case '/':

                   case ':':
                       showImage('colon sign');
                   case '$':

				   case '0':
				   case '1':
				   case '2':
				   case '3':
				   case '4':
				   case '5':
				   case '6':
				   case '7':
				   case '8':
				   case '9':
                       showImage('"number ' . $letter . '"'); 

                   case '!': 
                       showImage('"exclamation mark"'); 
                   case '?':
                       showImage('"question mark"');
				   case 'a':
				   case 'b':
				   case 'c':
				   case 'd':
				   case 'e':
				   case 'f':
				   case 'g':
				   case 'h':
				   case 'i':
				   case 'j':
				   case 'k':
				   case 'l':
				   case 'm':
				   case 'n':
				   case 'o':
				   case 'p':
				   case 'q':
				   case 'r':
				   case 's':
				   case 't':
				   case 'u':
				   case 'v':	
				   case 'w':
				   case 'x':
				   case 'y':
				   case 'z':
                       showImage('"letter ' . $letter . '"');

                       echo '<br />';
			echo '<p>Up to 40 letters only.</p>';

The switch-case clause calls the showImage function that grabs 20 images from Yahoo! for every query and then displays one at random:

	function showImage($q)
        $max = 20;
		$s = '';
		$url = 'http://api.search.yahoo.com/ImageSearchService/' . 
               'V1/imageSearch?appid=insert app ID&'. 
               'query=' . urlencode($q) . 
               '&results=' . $max;

        $dom = new domdocument;

		$xpath = new domxpath($dom);
		$i = rand(0, $max - 1);
		$source = $xpath->query('//Result/Thumbnail/Url')->
        echo '<img src="' . $source . '" ' .
                   'style="width:80px; height:80px" alt="" />';

Running the Hack

Upload letters.php5 to your server and view it with your browser. Type a word in the form and click Display. You should see a group of letters spelling your word, like the results for Yahoo! Hacks shown in Figure.

"Yahoo! Hacks" spelled by the Web of Letters

As you can see in Figure, all images are scaled to 80 pixels by 80 pixels, so they have the same size. The script uses inline styles, but you might want to move the style definitions into a separate CSS stylesheet to keep the HTML lean.

With Web of Letters, you can use the power of images across the Web for some fun. Happy writingand no ransom notes, please!

Philipp Lenssen

 Python   SQL   Java   php   Perl 
 game development   web development   internet   *nix   graphics   hardware 
 telecommunications   C++ 
 Flash   Active Directory   Windows