Will Bontrager Blogs Website Techniques

The size of the viewport sometimes is the size of the screen. But not always.

A viewport is the size of the browser's window where a web page is displayed.

There is a way to place something, a div for example, in an exact position within a viewport — regardless of viewport size.

The CSS position:fixed; is used. It places the div within the viewport and keeps it in position no matter how much the web page is scrolled.

But the div must still be told where to be. Using exact pixel measurements is not the way. Example:

position:fixed; top:150px; left:300px;

While the above might work for some viewport sizes, it is unlikely to work with all.

To specify a position valid within any viewport, let's use the vh and vw measurements. Example:

position:fixed; top:15vh; left:30vw;

That would work for any viewport size.

The 15vh value specifies 15% of the viewport height. Thus, top:15vh; places the div down from the top by the distance that equals 15% of the viewport's height.

Similarly, the 30vw value specifies 30% of the viewport width. Thus, left:30vw; places the div in from the left by the distance that equals 30% of the viewport's width.

The reason it would work for any viewport size is because vh and vw measurements are percentage of viewport height and percentage of viewport width, respectively.

Use vh and vw for good cross-device and cross-browser positioning within the viewport.

Let's finish this article with a technique for centering something within the viewport, regardless of the viewport's dimension.

The width and height of the div to be centered needs to be known. For this example code, let's assume the div's dimensions are 100px high and 150px wide.

To center the div, we use the CSS calc feature.

To calculate for the vertical centering, we calculate one-half height of the viewport minus one-half height of the div.

Similarly, for horizontal centering, one-half viewport width minus one-half div width.

Here it is:

<div style="width:200px; height:100px; background-color:rgba(0,0,255,.2); 
position:fixed; top:calc(50vh - 50px); left:calc(50vw - 75px);"></div>

The blue-colored parts in the above code are where the calculations take place.

Using the vh and vw CSS measurements lets you position web page content within any viewport size.

(This content first appeared in Possibilities newsletter.)

CSV stands for Comma Separated Values. It is a plain text format that can be used to store data. The format can also be used to transfer information from one software to another.

Here is the format:

• The values within a CSV file is separated with a comma.

• If any value itself contains a comma or a linefeed, the value is delimited with quotation marks (which means the value has a quotation mark at its beginning and at its end).

• Further, if the value itself contains a quotation mark, it is delimited with quotation marks and quotation marks within the value are escaped with either a backslash character or another quotation mark.

Records are separated with a linefeed.

All that can sound confusing. Here is an example CSV file with three records.

red,white,"also, white",blue
"blue, too","and also ""grayish"", next to the blue"
green,yellow,purple

Let's address each of the above records separately (one line per record).

The first record has four value items:

1. red
   [the value contains no comma or quotation mark]
2. white
   [the value contains no comma or quotation mark]
3. also, white
   [in the CSV file, the values are delimited with quotation marks because the value contains a comma.]
4. blue [the value contains no comma or quotation mark]

The second record has two value items:

1. blue, too
   [in the CSV file, the value is delimited with quotation marks because the value contains a comma.]
2. and also ""grayish"", next to the blue
   [in the CSV file, the value is delimited with quotation marks because the value contains a comma and also because the value contains at least one quotation mark. Quotation marks within the value are doubled to distinguish them from the delimiting quotation marks.]

The third record has three value items:

1. green
   [the value contains no comma or quotation mark]
2. yellow
   [the value contains no comma or quotation mark]
3. purple
   [the value contains no comma or quotation mark]

Although they can be created manually, CSV files generally are created with software.

CSV files can be somewhat readable by humans. However, the files generally are meant to be read by software.

You now know how CSV files are formatted.

Rows of values are one record per line. Values are separated with a comma. Values that contain a comma, a linefeed, or a quotation mark are delimited with quotation marks. Quotation marks within values are doubled to distinguish them from the delimiting quotation marks.

(This content first appeared in Possibilities newsletter.)

Frequently, or so it seems, I want to center a multi-line block of text. (The block is to be centered, not the individual lines of text.)

Here is an illustration block of text:

"… white with
red polka dots."
-Will Bontrager
in The Kick

The above uses CSS width:fit-content; to make the width of the p or div paragraph the width of the content.

There are other ways to make an HTML container (p and div are example containers) calculate itself to the width of the content. Like display:table or position:absolute, but I think width:fit-content; is best for free-flowing content.

To center the above illustration block of text, I specify auto for the left and right margins. It does a wonderful job.

Note: If you have an old browser or email reader, it might not support the CSS width:fit-content; definition. If that is the case, the width of the p or div or other HTML containers will not be affected by that definition.

These are the three CSS definitions that I tend to use for centering a block of text:

width:fit-content;
margin-left:auto;
margin-right:auto;

Other CSS in the illustration block of text are for the border and some padding.

Here is the code for the entire illustration block of text:

<p style="width:fit-content; 
          margin-left:auto; 
          margin-right:auto; 
          border:1px solid #ccc; 
          border-radius:.5em; 
          padding:.5em;">
"&hellip; white with
<br>red polka dots."
<br>-Will Bontrager
<br>in <i>The Kick</i>
</p>

Just like a div with no width specified, the div with CSS width:fit-content; will not expand wider than the available column width.

The CSS width:fit-content; definition, along with auto for the left and right margins, can be effective when you need to center a block of text — without affecting the justification of the text within the container.

(This content first appeared in Possibilities newsletter.)

The Meme Maker is a new tool. It is intended to be simple and quick to use.

I made this for myself, at first. I had wanted something where I could quickly pop an image on a page, type some text and position it, then take a screenshot.

In essence, that is what the new tool has going for it. It is a quick, low-hassle way to make a meme.

Other features include the text size change, text color change, background color change, and adjusting of the background opacity.

An advanced feature is that HTML tags can be used. Also inline CSS. Not PHP or JavaScript, though.

Because the meme text field allows HTML and CSS , there are some tricks you may wish to be alerted to. That is the reason for this article.

One caveat: Most HTML tags contain an opening tag and a closing tag, such as <b>text</b>. If you use HTML and the rest of the page suddenly looks messed up, verify your HTML tags are balanced.

The more adept you are with HTML, the more you will be able to use this advanced feature of Meme Maker.

Line breaks —

A new line can be inserted into the meme text with a keyboard enter/return key or the HTML <br> tag. If you use both, you get two line breaks.

Use line breaks to separate text or to shorten text lines.

Push lines in from left —

Type the character entity   at the beginning of the line to push text in from the left. Repeat until the indent is to your liking.

Simple font attributes —

Bold and italic text can be specified with the <b>, </b>, <i>, and </i> tags. Similar with underlining, use the <u></u> set of tags.

Or, use inline CSS to specify those font attributes.

Text change within the meme —

To change specific text color, size, background, font family, or other value within the meme, use inline CSS. Examples:

<span style="color:orange;">Yes!</span>
<span style="font-size:120%;">Yes!</span>
<span style="background-color:rgba(0,0,0,.5);">Yes!</span>
<span style="font-family:cursive;">Yes!</span>
<span style="letter-spacing:3px;">Yes!</span>

Image —

Yes, you may use the img tag to place images onto the meme image.

Video —

The video tag can be used to place videos onto the meme image.

A regular screenshot will capture only the video frame that was present when the screenshot was done. But if you have the ability to capture a screen recording, you should be able to capture a video playing on a section of the uploaded meme image.

Videos From Your Website has information about the video tag. Also the Video Embed element page.

Iframe —

Yes, you may use the iframe tag to insert content onto the meme from another URL.

Give the Meme Maker a try. Even if you have no use for memes, the tool may give you ideas what else text on images can be useful for.

(This content first appeared in Possibilities newsletter.)