Overlined text in HTML
Highlighting text using overline
In the same manner as you can underline text, you can also have an overline, i.e. a line over the text.
The overline can only be done i one way: STYLE="text-decoration:overline". The style has to be applied on a tag for a text section e.g. <P>, <DIV> and <SPAN>. Due to the way text decorations are normally used in a text, <SPAN> will usually be a good solution as it doesn't add any other formatting to the text string.
A piece of text with overline will look like this as code:
On the page, when shown, it looks like this:
The overline can only be done i one way: STYLE="text-decoration:overline". The style has to be applied on a tag for a text section e.g. <P>, <DIV> and <SPAN>. Due to the way text decorations are normally used in a text, <SPAN> will usually be a good solution as it doesn't add any other formatting to the text string.
A piece of text with overline will look like this as code:
Here the text is normal, <SPAN STYLE="text-decoration:overline">here the text has overline,</SPAN> and here the text return to normal.
On the page, when shown, it looks like this:
Here the text is normal, here the text has overline, and here the text return to normal.
Combination effects with other types of styling
This type of styling is, in combination with other effects, very sensitive towards programming and browser. Så her er det af største vigtighed at få testet både forskellige browsertyper og forskellige versioner af de enkelte typer.
The thickness of the line is affected by some browsers, when the text is in bold, so here you have to be a bit careful using combinations. When working with a text string which is already styled by a tag, e.g. <SPAN>, I usually recommend adding the styling there, if possible. It's a practical thing regarding clarity of the codes. The code for the combination then looks like this:
On the page, when shown, it looks like this:
The thickness of the line is also affected by the font size, but the effect depends on the browser being used. Here you have to be aware of additional combination effects, as variations in the programming can give differences in effect.
If we look at a temporary change in font size to 16.0 pt, where each section is controlled by its own code, the code looks like this:
On the page, when shown, it looks like this:
On the other hand, if you make a section with a new font size, in a section with overline, the code looks like this:
On the page, when shown, it looks like this.
Depending on the browser, the line will split into two different heights according to font size or adapt to the dominating effect, i.e. for one browser the line will follow the biggest font, giving a big distance between line and using small font, for another browser, the line will follow the small font, causing the line to go through the upper part of the text using bigger fonts, instead of being on top. Make sure you test the combinations on several browsers, so you avoid odd surprises.
The thickness of the line is affected by some browsers, when the text is in bold, so here you have to be a bit careful using combinations. When working with a text string which is already styled by a tag, e.g. <SPAN>, I usually recommend adding the styling there, if possible. It's a practical thing regarding clarity of the codes. The code for the combination then looks like this:
Here the text is normal, <SPAN STYLE="text-decoration:overline; font-weight:bold">here the text becomes bold with overline,</SPAN> and here the text return to normal.
On the page, when shown, it looks like this:
Here the text is normal, here the text becomes bold with overline, and here the text return to normal.
The thickness of the line is also affected by the font size, but the effect depends on the browser being used. Here you have to be aware of additional combination effects, as variations in the programming can give differences in effect.
If we look at a temporary change in font size to 16.0 pt, where each section is controlled by its own code, the code looks like this:
Here the text is normal, <SPAN STYLE="text-decoration:overline">here the text has overline,</SPAN> <SPAN STYLE="text-decoration:overline; font-size:16pt;">here the text with overline changes to 16.0 pt,</SPAN> and here the text return to normal.
On the page, when shown, it looks like this:
Here the text is normal, here the text has overline, here the text with overline changes to 16.0 pt, and here the text return to normal.
On the other hand, if you make a section with a new font size, in a section with overline, the code looks like this:
Here the text is normal, <SPAN STYLE="text-decoration:overline">here the text has overline, <SPAN STYLE="font-size:16pt;">here the overlined text changes font size to 16.0 pt,</SPAN></SPAN> and here the text return to normal.
On the page, when shown, it looks like this.
Here the text is normal, here the text has overline, here the overlined text changes font size to 16.0 pt, and here the text return to normal.
Depending on the browser, the line will split into two different heights according to font size or adapt to the dominating effect, i.e. for one browser the line will follow the biggest font, giving a big distance between line and using small font, for another browser, the line will follow the small font, causing the line to go through the upper part of the text using bigger fonts, instead of being on top. Make sure you test the combinations on several browsers, so you avoid odd surprises.