Monday, July 30, 2012

Mark-up for superscript, subscript, and display code

 for Firefox 10, Google Chrome 20, Internet Explorer 8


Raised script is called "superscript".

The tags are and .


The superscript tag looks like this when rendered:

"This text contains superscript text."

Or when used in mathematical notations: 2(3)


Lowered script is called "subscript".

These are the subscript tags: and .


Rendered subscript looks like this: "This text contains subscript."

Or like this: 2(3)

Show Code

Above, when I was showing how to code for raised script I wrote,

"The tags are and ."

You may be asking, 'How did you make the tags show as characters - and prevent the browser from raising the word, "and" - like it's supposed to?'

In this example, the secret is the "textarea" tag. When one writes code between textarea tags they are rendered just as text, the browser doesn't interpret them as functions.

Some time ago, in the early days of of the internet, a group of code writers decided that a textarea should have certain characteristics associated with them. I don't understand why, I think its a waste of time - but in any case, this is what a default textarea looks like (in your browser):

Different browsers attach different defaults to textareas in different versions. Firefox 10 and Chrome 20 add a re-size tab that allows the user to expand the textarea by dragging it, while Internet Explorer 8 adds a scrollbar instead - even if there is no content in the textarea. In Google Chrome a scrollbar is added if default height is set at less than the browser's default line-height (18 pixels) - even if there is enough room for content in the prescribed width. In Google Chrome and IE8 browsers, textareas have a default width (20 characters) and height (2 lines), while Firefox 14 defaults 3 rows high instead of 2.

To show you the tags in a sentence unrendered by the browser, I had to add a stylesheet to this post that gets rid of all the defaults. One does this by adding attributes that over-ride unwanted, default attributes.

You can read them below, I have pasted the style sheet into another textarea. I got rid of the border in the first line: "border: 0px none;"; I set a width and a height, which over-rides columns and rows defaults; and got rid of the resize tab by writing "resize: none;". In Google Chrome a scrollbar is added to the textarea even though all the content would fit in the prescribed parameter - if it wasn't in the way! To get rid of the scrollbar in Chrome 20, and in IE8 I had to add the fifth attribute, "overflow: hidden;".


[Note: I had to break the 'end textarea' tags ('</textarea') so browsers wouldn't read it as the end of the yellow textarea box. This does not happen with any other tag, except textarea.]

Originally when I wrote this article in my source code editor, Nopepad++ I had the width set to contain 5 characters (60 pixels - Blogger's default character width for this blog template is 12 pixels), and height is set to the common browser default line height (18 pixels). But because Blogger has a default line height and font size smaller than the default line height and font-size in most browsers, the textarea-surrounded-text sat high above the other text in a sentence. To fix this I reduced the line height and the font-size inside the "show-code-1" textareas. The change works well in all the browsers mentioned here.

(Opera and Safari are two other fairly popular browsers, but I don't have them on my machine right now as I'm learning data bases - and that project is taking up a lot of disk space and memory.)

This would be much simpler if W3C (the web standards body) would restate the standard to no defaults, except to contain the writing between the tags.

I have no idea why textarea is preset with all these defaults. At present textarea is set to 20 characters wide and 2 lines high. ???


W3C | Elements | textarea |

Nopepad++ code editor by Don Ho (free AND free!) |


No comments:

Post a Comment