A new way to apply logos within html

I wished to use the glow visual filter to highlight a name within html, so that it appeared as a logo. Microsoft's conventional way is to use absolute positioning of the block of text and to find the width by trial and error. This is tricky and comes undone if the viewer varies the text size within the browser. Also clipping can occur. I had been experimenting with visual filters for a few days when I hit on the innovative idea described here.

I used the following code fragment:-

This gives the following result:-

When we write  This is the logo  it slips into the text.

Let's see it at the start of a line:-

 This is the logo  We note that there is no clipping of the logo.

Microsoft point out that clipping is loss of part of the visual filter effect due to the object, in this case text, butting against the side of the container, in this case a span. Microsoft avoid this by using absolute positioning. My variation is to place non-breaking spaces at each end of the object. These may be as useful to the html writer as under-scores are to programmers.

The width parameter needs to be understood. It has to be placed in the container, but applies to the client - in this case, the text. Microsoft adjust the width but my idea is to set it  small  and ensure that the object over-rides it and remains unbroken, by enclosing it in no-break tags. These ensure that the object remains on one line.

see example on Roland S-50 page