Text Replacement Techniques in HTML / CSS
Monday, June 23, 2008 The proper way to enter titles in graphics on a Web page is to replace using style sheets (see Progressive Enhancement in Accessibility and Usability: unobtrusive Javascript). This technique allows you to make the contents of the site irrespective graphics display imposed by sheets of styles. In addition, crawlers and spiders will have a correct reading HTML methods ignoring the replacement bid to end graphics. Insert a picture directly (TAG img it makes the title inaccessible to ordinary readers ASCII (crawlers, spiders, blog plugin, screen-reader, etc ...).
Another advantage is not to underestimate the ability to upload a style sheet in relation to language, making this the site also located at the pictures.
The technique of using CSS replace operation can be applied only to Web sites already online, where the HTML, for various reasons, it is not altered. The necessary and sufficient so that we can apply the technique of substitution is to have access to a unique title / text to replace. For example, if we have a condition like this:
Thanks all'attributo id in the TAG H1 a possible CSS code would be:
- h1 (# titolo_uno
- text-indent:-1000000px;
- ;width:100px;height:30px; display: block; width: 100px; height: 30px;
- ( images/titolo-in-grafica.gif ) no-repeat ; background: url (images / title-in-grafica.gif) no-repeat;
- )
Not having to dial a unique, like id of the previous case, things obviously are more complicated, and each case must be examined separately, trying to recover uniqueness in the HTML DOM tree.
If instead you write the HTML code, council this syntax, which guarantees a good taggatura:
- =”Questo è il titolo numero uno” > <span> Questo è il titolo numero uno </span> </h1> <h1 id ="titolo_uno" title ="Questo is the title number uno"> <span> This is the number one title </ span> </ h1>
And its related CSS:
- } # titolo_uno span h1 (display: none)
- h1 (# titolo_uno
- ;width:100px;height:30px; display: block; width: 100px; height: 30px;
- ( images/titolo-in-grafica.gif ) no-repeat ; background: url (images / title-in-grafica.gif) no-repeat;
- )
This prevents the text-indent:-1000000px making everything cleaner, despite the addition of the span The text itself disappears through the span but remains the title above the title graphics.
This procedure has the great advantage of not requiring Javascript to be used, making it simple and easy to apply also for the less experienced.
Angelo said:
Use the
text-indentso I do not think it completely right, but with the second solution solves everything .. I like it, is a good technique .. keep in the account for future work!Giovambattista Fazioli said:
@ Angelo: I agree, the
text-indentnormally is a "piece" when you can not write an HTML better. The second, however, I always use when I have to do with titles that "may" be replaced by graphic below.In the coming days will present another very interesting technique to replace text with graphics ... then I say it is "nice" as I found myself
Angelo said:
not fail!
Text Replacement Techniques in Flash | Undolog.com said:
[...] Text Replacement I am presenting today is in some respects, really interesting. Unlike the classic image to replace through CSS, this technique uses a flash to override the titles of our site. Despite being a [...]