Will Bontrager Blogs Website Techniques

When you have a form with fields you don't want the user to change, there is a choice of two attributes built into HTML to accomplish that.

The two attributes are readonly and disabled. They have only one thing in common: preventing field value change. Otherwise, each is unique.

The field values of both readonly and disabled cannot be changed. If it can be changed on the screen, the form submission will include the unchanged version, not the changed.

When the form submits, readonly fields will be included. However, on form submission, readonly fields will be absent from the submission.

The readonly field value color is whatever the browser determines is its default. The disabled field value color is almost always grayed out to indicate it's a non-interactive field.

(This content first appeared in Possibilities newsletter.)

Most of you have embedded an image within text. You have a paragraph of text, and you embed an image within it the same size as the text.

If you use height:1em; for the image, it may open up the interline spacing. That's because 1em includes the descenders. The base of the image doesn't start that low. Thus, it sticks up above the actual text. (There is a way to avoid that, mentioned shortly.)

Manually specifying a pixel height for the image can be done. But if it is too small, it looks dinky. Too large, and the image expands the interline spacing. If you decide to change the text font size, you may need to resize all those images.

That is, unless you specify the CSS declarations height:1em; vertical-align:text-bottom; within the img tag.

The vertical-align:text-bottom; CSS declaration moves the image down so the bottom of the image is in line with the bottom of the text descenders. Now a 1em tall image won't stick above the top of the text. And the interline spacing won't change.

The height:1em; vertical-align:text-bottom; declarations should not affect the interline spacing.

• height:1em; is the height of the text. The font size.

• vertical-align:text-bottom; brings the bottom of the image down to the bottom of the text descenders (so the image height won't alter the interline spacing).

If you change the text font size, the image height will change automatically.

The Willmaster logo images embedded in the following examples have the CSS declarations height:1em; vertical-align:text-bottom; specified in the img tag.

The examples demonstrate font size changes. You'll see the image height adjust itself to match the font size.

Here is the basic source code of the above examples. On your test page, change the font size to see the image grow or contract.

<p style="font-size:16px;">
The height of the image is the text font size.
<img style="height:1em; vertical-align:text-bottom;" src="https://www.willmaster.com/images/wmlogo_icon.gif" alt="Willmaster.com logo">
When you change the font size, the image height will also change.
</p>

There are times when an image must be a specific size. I've found in most instances, however, I want the image within the line of text to adjust its height when the font size is changed. The above code accomplishes it.

(This content first appeared in Possibilities newsletter.)

The numbers that mark ordered lists can be reversed. The list items don't reverse. Just the numbering.

Original numbers:

1. Position firecracker
2. Light the fuse
3. Skedaddle
4. Boom

Reversed numbers:

1. Position firecracker
2. Light the fuse
3. Skedaddle
4. Boom

It works with other numbering types, too:

1. Position firecracker
2. Light the fuse
3. Skedaddle
4. Boom

1. Position firecracker
2. Light the fuse
3. Skedaddle
4. Boom

Shortly, I'll reveal how to recreate the examples. But first, let's start the numbering at 8 instead of 1. For starting at the number 8, regular order numbers are 8 to 11, and reverse order is 8 to 5.

Nifty, huh?

It's not generally used. When it's needed, though, it's elementary to implement.

In fact, it's so simple that all you have to do is insert one word into the <ol> tag: reversed

That's right, just the one-word attribute reversed. Example:

<ol reversed>

For the other variations in the examples, to specify a start number, use the start attribute.

<ol start="8" reversed>

To change the numbering, use the type attribute. Here is a list and an example.

type="1" (regular numbering)
type="i" (lowercase Roman numerals)
type="I" (uppercase Roman numerals)
type="a" (lowercase letters)
type="A" (uppercase letters)

<ol start="8" reversed type="i">

The purpose of this article is to show (or remind) how to publish reversed numbering for an ordered list.

Remember reversed and you're good to go.

(This content first appeared in Possibilities newsletter.)

You can automatically scroll the content of a div to the bottom. Generally, this would be done for user convenience.

I had need for that functionality just this morning. It is the reason for this article. My thought was that some of you would appreciate knowing how to do this.

First, a div with an id is required. We'll use this one for a demonstration (contains a short list of CSS values).

The demonstration div is up to an inch high. It will have scrollbars when its content is more than will fit.

Any div with an id value can be told to scroll to the bottom. The div may contain any content a div can contain. I made the demo with scrollbars and border.

Here is the source code of the demo div.

<div id="my-demo-div" style="max-height:1in; max-width:fit-content; overflow:auto; border:1px solid black; padding:.5em; border-radius:.5em;">
fit&minus;content<br>
inherit<br>
initial<br>
max&minus;content<br>
min&minus;content<br>
revert<br>
revert&minus;layer<br>
unset
</div>

So far, so good.

To get the div to scroll to the bottom automatically, this JavaScript can be used.

<script type="text/javascript">
let d = document.getElementById("my-demo-div");
d.scrollTop = d.scrollHeight;
</script>

Replace my-demo-div with the id of the div to be scrolled. Place the JavaScript somewhere below the div to be scrolled. The scrolling will occur when the page loads.

If you prefer the scrolling to occur when the user clicks something or upon some other event, put the these two lines of JavaScript code into a JavaScript function. Then call the function when the event happens.

let d = document.getElementById("my-demo-div");
d.scrollTop = d.scrollHeight;

Only 2 lines of JavaScript are required to scroll a div automatically to the bottom.

(This content first appeared in Possibilities newsletter.)