Blinking text using HTML


Enhancement of text, using blinking characters

Blinking text is on of the types of text decoration that are generally recommended not to use. Like flashy colors and hopping animations, making it hard to read the page, this is considered a porn effect. Also you should be aware that blinking text is not supported by all browsers.

Blinking text is currently possible in two ways, using HTML, and none of them are really suitable, as they only work for some browsers:

The first one is STYLE="text-decoration: blink". Style has to be applied to a text section, e.g. <P>, <DIV> and <SPAN>. The way text decorations are normally used in a text, <SPAN> will usually be a good solutions as it doesn't add any other formatting to the text.

A piece of blinking text will looke like this as code:

Here the text is normal, <SPAN STYLE="text-decoration:blink">here the text blinks, if the browser support this,</SPAN> and here the text returns to normal.


On the page, when shown, it will look like this:

Here the text is normal, here the text blinks, if the browser support this, and here the text returns to normal.



The other way of doing it is the tag <BLINK>. It is used like other tags with a start and end tag.

A piece of text, containing blinking text, will look like this as code:

Here the text is normal, <BLINK>here the text blinks, if the browser support this,</BLINK> and here the text returns to normal.


On the page, when shown, it will look like this:

Here the text is normal, here the text blinks, if the browser support this, and here the text returns to normal.


Workaround for blinking text (that works)

If you really want to have blinking text, and it has to work, you have two general ways of doing it:
  1. An animated gif, i.e. the text is changed to an image and inserted, using the tag IMG. How this is done, can be seen under images
  2. A JavaScript defining a new tag
Let's take a closer look at the JavaScript. It is possible to create your own element, we'll call it JavaBlink, and it looks like an ordinary tag, when you use it, i.e. <JavaBlink>Blinking text here</JavaBlink>. For this we create a function, also called JavaBlink. Element and function don't have to have the same name, but for this particular purpose, it is very practical.

The script looks like this:

<SCRIPT type="text/javascript">
  function JavaBlink() {
     var blinks = document.getElementsByTagName('JavaBlink');
     for (var i = blinks.length - 1; i >= 0; i--) {
        var s = blinks[i];
        s.style.visibility = (s.style.visibility === 'visible') ? 'hidden' : 'visible';
     }
     window.setTimeout(JavaBlink, 1000);
  }
  if (document.addEventListener) document.addEventListener("DOMContentLoaded", JavaBlink, false);
  else if (window.addEventListener) window.addEventListener("load", JavaBlink, false);
  else if (window.attachEvent) window.attachEvent("onload", JavaBlink);
  else window.onload = JavaBlink;
</SCRIPT>


The script has to be placed somewhere on the page, before the tag, or called as an external script. Wwe can now use the new tag like this:

Here the text is normal, <JavaBlink>here the text blinks, using the JavaScriptet,</JavaBlink> and here the text returns to normal.


On the screen, it looks like this:

Here the text is normal, here the text blinks, using the JavaScriptet, and here the text returns to normal.



The script has the advantage that you can control the blinking speed with window.setTimeout, by giving it another value than, e.g.

Here the text is blinking with the time set to 500


Here the text is blinking with the time set to 1000


Here the text is blinking with the time set to 3000


You can now play around with the blinking speed of the text, or whatever else you have placed in the tag.