Will Bontrager Blogs Website Techniques

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.)

When you use a browser's "View Source" menu item (generally also available with a right-click), then you get the source code of the web page.

But which source code? Here are 3 possibilities.

• The browser won't give you the raw or original source code if it includes any PHP code. To get the source code with PHP code intact, you need to have access to the server to download the file (or have the owner of the web site give the file to you).

• The browser might give you the actual source code it receives from the server. This would be the web page with PHP already having run and made any changes to the page that it has been told to do. It depends how the browser handles JavaScript-inserted content.

• The browser might present the source code that results after certain JavaScript has run.

The below script gets the actual web page source code after PHP runs but before JavaScript runs.

<?php
$URL = urldecode($_SERVER['QUERY_STRING']);
echo '<pre style="overflow:auto; white-space:pre-wrap; outline:1px solid black; padding:.5em;">';
echo htmlspecialchars(file_get_contents($URL));
echo '</pre>';
?>

No customization is necessary.

Save the file as sourcecode.php or other *.php file name. Upload the script to your server and make a note of its URL.

To use, type the script's URL into your browser, append a ? character followed by the URL of the web page you want to see the source code of. Load that page and you will see the web page's real source code.

Here is an example of what you might type into your browser's address bar. (The example assumes the script is installed at https://domain.com/sourcecode.php)

https://domain.com/sourcecode.php?https://spamfreeform.com/

The result would be the source code of the index page at the spamfreeform.com domain.

The short sourcecode.php PHP script presents the real thing, the real source code exactly like it would be delivered to a browser.

(This content first appeared in Possibilities newsletter.)