5. Narrower Text & Wider Images

Introduction

With this post, we arrive at my personal incentive for switching from Tumblr to WordPress: more control over the width of the text relative to the width of images.

While I attempt to illustrate various widths below, if you are reading this on a hand-held device, you may not see the differences.

According to most readability guidelines, text should be approximately 40 to 75 characters wide. The printed version of The New York Times adheres carefully to narrow, readable text (approximately 1 1/2 alphabets or 39 characters including spaces):

Many web pages exceed this measure, often by a factor of 2 or 3, slowing down the reading process and/or increasing the misreadings.

While text should be narrow, images often need to be displayed at maximum width for the device. However, most WordPress (and Tumblr) themes pre-set the width of images to be the width of the text, both being the width of the column. Since this post no longer respects that constraint, I’ve mocked the constraint in the image below:


However convenient this uniform width is for tolerable dimensioning, it undermines either the readability of the text or the lucidity of the graphics.

So my challenge is to allow images to be wider than text.

Note: the pixel measurements that follow assume a minimal browser width of about 1200px; otherwise, the browser will proportionately shrink the images.

Narrowing the Text

To narrow the text, I modified the entry that was earlier used to add 20px below every paragraph, adding a maximum width measured in characters:
.detail-page p { padding: 0 0px 20px 0px; max-width: 48ch;}

This works just fine (and is the width you’ve been reading from the start).

Widening the Graphics

Because I’ve made the following change already, the images are wider than the text, but would otherwise have remained the exact (now narrowed) width of the text.

Here’s how I determined the change. Using my my browser’s Inspector, I looked at the CSS settings for this image that is natively 900px wide.

The Inspector showed this setting, which is taken from the primary CSS for WordPress sites (style.css):
.blog-list p img { width: 100%; height: auto; }
This 100% setting limits image widths to the text width. The 100% can be overridden by creating a new “Additional CSS” entry (described here):
.blog-list p img {width: auto; max-width: 125%; height:auto;}

The “width: auto” allows images that are equal to, or narrower than, the text width to display as such. (The above mockup, “Text = Image Width,” illustrates this by displaying at the approximate width of the text.)

The “max-width: 125%” allows larger images to display wider than the text column.

As a result of that CSS addition, the 900px image displays at 730px, which is better than the default 584px when it was constrained to the width of the text:

Adding More Image-size Control

Ideally, one would be able to display some images at, say, 50% the width of the text, and other images at 175%. To do this, additional CSS entries need to be made. The downside to this approach is that one must edit the post in HTML, in order to add the <img class=”wide”>.

First, I add a new class through Additional CSS:
.blog-list p img.wide {width: auto; max-width: 175%}
Then I insert a large image in the full size (1280px wide)—adding the class=”wide” after inserting the image:

Hyperlinked Thumbnails

The other approach to the problem I’ve been wrestling with is to use WordPress’s built-in image hyperlinking ability. Accordingly, one would insert an image and (during insertion) specify that this image should hyperlink to the full size image. This approach is best in some cases, particularly with images too large to fit within the confines of the WordPress web page—but it requires a few clicks on the reader’s part. For the following example, the image initially displayed is only a thumbnail, but WordPress allows you to insert a column-wide image that still hyperlinks to the original, large image.

The NASA/ESA Hubble Space Telescope: the Eagle Nebula’s Pillars of Creation.

My Final Solution

One final note, for some of my other sites I use a plugin called “Easy Image Sizes” by Steven B. With this plugin, when I import images to WordPress, one size (640 pixels wide) is always created, and this is the size I usually insert in my posts. It’s wider than the text but narrow enough to not interfere with the right-hand column. It can be hyperlinked to the full-size image (a combination that gives readers a decent image that they can inspect in detail if they want). Here’s an example:

Text is about 48 characters wide and image is 640 pixels wide
Text is about 48 characters wide and image is 640 pixels wide on the site where I use it initially (https://notwithoutsincerity.myplaza.xyz/2018/08/13/peru1/)

Leave a Reply

http-www-in1accord-net-wp