Evolving text on the web

Introducing “web-based conceptual portmanteau”.

Published in

UX Collective

8 min readApr 29, 2021

On a dark blue background, the words “Web-Based Conceptual Portmanteau” appear on the left in white text above a large title which states “Evolving Text on the Web — by The Society Library” in pink and white. To the right of the title, is an image of a cartoon person holding a giant pencil. They are sketching on what appears to be a piece of paper with text and image symbols laid over a laptop screen. Pop-up speech bubbles with a heart, a star, and “…” indicating speech appear above the laptop.

Shortly after the digitization of analog materials, such as books and newspapers, the capabilities provided by web-based technologies have enabled the evolution of text itself. The hyperlink, the ‘tweetable’ snippet here on Medium, and hover-over pop-pops which afford text more meaning, context, and potential for sharing have transformed both the form and function of text.

We particularly enjoy the idea of the ‘embedded aside,’ which is used to provide context, commentary, references, or provide fact-checking — as seen on today’s mobile version of this interactive CNN article covering President Biden’s first joint address to Congress (published April 29th, 2021). While the design is intuitive enough to avoid the insult of being explained, we’ve broken down the components below regardless:

Title reads: “Anatomy of CNN’s Embedded Aside” above a screenshot. Text reads: “This text is a transcript of Biden’s speech. It is dark grey/black text on a white background. Some text is highlighted in yellow, indicating that it is the content to which the forthcoming embedded aside is referring to. The ‘embedded aside’ is differentiated in many ways. It is contained within a differently colored, shaded inset box and written in differently colored text, indicating it was written by CNN staff.

Title reads: “Application of CNN’s Embedded Aside.” Three screenshots are shown indicating the use of the embedded aside (a differently colored inset box) can be used to add commentary to Biden’s transcript, add a fact-check to Biden’s transcript, or add context to the topic of Biden’s transcript, along with references that are hyperlinked to an external source. — [Source]: Mobile Version of URL: https://www.cnn.com/interactive/2021/04/politics/biden-address-annotated/

As a non-traditional library working to transform how libraries of knowledge are organized and made available to the public, The Society Library is usually quite eager to work with designers and developers tinkering with new ways to display our content.

Today, we would like to introduce what we believe to be a novel innovation to web-based text, similar to ‘embedded asides’ (though we don’t know who originally created those). This innovation was designed specifically for our needs and enabled by the technologies which we already use in the course of our work. We call it “Web-Based Conceptual Portmanteau,” and below you will find the immediately available application of this concept as well as our designs for future innovation of this concept.

The word “portmanteau” has many meanings. By one definition it means ‘a large case for carrying clothes while traveling.” Another definition describes the term as meaning “consisting of a wide range of things that are considered as a single thing.” From linguists and literature, however, the word portmanteau means “a word formed by combining two other words,” all according to the Cambridge Dictionary, though translated to American English standard spelling in this article. The last definition we present here is the one which we apply to our concept: “web-based conceptual portmanteau.”

The linguistic phenomena of portmanteau and its use as a literary device spans languages and cultures all over the world. Portmanteau in this classical sense operates on text in a two-dimensional way, through the seemingly physical combination of words. Today, we posit that additional dimensions of meaning (specifically more precise meaning), can be added to text if based in web-based technologies such as those we use. Instead of combining words to create a composite meaning, our “web-based conceptual portmanteau” is based in a technology that allows us to combine multiple forms of media, visualizations, registers, and expressions into one information packet for the purpose of optimizing for precise meaning and comprehension. Unlike portmanteau, which operates at the “word-level,” “web-based conceptual portmanteau” works conceptually at the “claim-level.”

For our purposes, we define claim as being: “an assertion of truth, which can be a statement of fact or opinion, wrong or right.”

Examples of claims include:

“The sky is blue.”
“Chocolate is the best treat.”
“The History Channel is always historically accurate.”

Claims can stand alone or be combined together to form arguments, text snippets, compound sentences, and other sentences, but the minimum application of “web-based conceptual portmanteau” is at this claim-level, even if the claim is considered a partial sentence.

That being said, we now offer our definition of “Web-Based Conceptual Portmanteau”

Definition:

“Web-Based Conceptual Portmanteau” is an internet-based expression of meaning that relies on web-based technologies to present a claim, argument, sentence, or text snippet with at least two of the following features as inherent to the text structure:

embedded definitions, which are inextricably attached to the claim, argument, sentence, or text snippet.
variant phrases of similar/different registers, including registers of different reading levels and technical registers which use jargon, which are inextricably attached to the claim, argument, sentence, or text snippet. Various phrasings of similar register, but substituted words, is also a feature.
the expression of meaning shown visually through images, giphys, or other graphics referenced from external sources, which are inextricably attached to the claim, argument, sentence, or text snippet. Formats include: JPEG, TIFF, GIF, BMP, PNG, WebP, SVG, and others.
the expression of meaning shown visually through videos referenced from external sources, which are inextricably attached to the claim, argument, sentence, or text snippet (video with audio does not count as two distinct features). Formats include: MP4, MOV, MKV, and others.
the expression of meaning articulated through audio referenced from external sources, which are inextricably attached to the claim, argument, sentence, or text snippet (audio with video does not count as two distinct features). Formats include: MP3, WAV, AIFF, AU, PCM, and others.
contextual explainer paragraphs which provide more broad context of the claim, argument, sentence, or text snippet itself or its connection with adjacent content.

It is encouraged, but not required, that “web-based conceptual portmanteau” contain source meta-data for any content that is combined with the claim, argument, sentence, or text snippet as a standard. The ‘physical’ connection of these features can be expressed through buttons, badges, hyperlinks, or other similar visual indicators on, in, or adjacent to the claim, argument, sentence, or text snippet.

“Web-based conceptual portmanteau” is not merely conceptual, but an innovation of text that is already being applied with web-based technologies at the Society Library. “Web-based conceptual portmanteau” was invented in order to convey the more precise meaning of claims, arguments, text snippets, and sentences for the purpose of enabling comprehension and understanding in an educational context.

“Web-Based Conceptual Portmanteau” — Applied

The following visual examples are demonstrations of “web-based conceptual portmanteau” applied by The Society Library. The Society Library uses the underlying technology created by Stephen Wicklund and front-end representation created by Mike Kissinger and Presley Pizzo both in our work and in our examples. The Society Library is grateful to have the support of Stephen, Mike, and Presley as volunteers, teammates, and contractors in the past and present.

“Web-based conceptual portmanteau” is not confined to the following representation in any way. The base representation of “web-based conceptual portmanteau” can be any format as long as it contains at least two of the aforementioned features.

Example: Using web-based conceptual portmanteau to express a claim in a node.

The Society Library is a 501(c)3 non-profit organization that builds databases of content composed of arguments, claims, and evidence derived from various sources of media in order to model societal-scale dialectics for educational purposes. The Society Library organizes claims, arguments and evidence into “nodes.”

A white box, outlined in blue, with text and various buttons and features is depicted. The text on the topic of the box reads a claim: “COVID-19 is a naturally occurring disease caused by a novel coronavirus.” The words “novel coronavirus” are underlined. Below the claim are four small circles, with the far left one shaded blue. A definition of novel coronavirus is shown below that in quotations. Two boxes are at the bottom, which read “argue for” and “argue against.” The box itself is a “node.” — Shown here are the following features: Text box which contains partial claim, “specificity slider” [the four circles under the claim] which enables variant phrases in multiple registers, as well as definitions, and interactive comment box feature: “argue for/against”

Feature: Embedded Definitions

Embedded Definitions, which are associated inextricably attached with the claim, argument, sentence, or text snippet

The same white box, outlined in blue, with text and various buttons and features is depicted. The text on the topic of the box reads a claim: “COVID-19 is a naturally occurring disease caused by a novel coronavirus.” The definition which is below the claim has an arrow pointed towards it reading “Embedded Definitions” to point out where in the text box the definition is written. — Embedded definitions are currently shown as drop-downs

The same white box with text with various buttons and features is still depicted. Multiple definitions of “novel coronavirus” is shown as a pop-up instead of being contained in the white box. — Embedded definitions may also be shown as pop-ups (this image is a mock-up)

Feature: Various Phrasings

Variant phrases of similar/different registers, including registers of different reading levels and technical registers which use jargon, which are inextricably attached to the claim, argument, sentence, or text snippet. Various phrasings of the similar register, but substituted words, is also a feature.

The same white box with text and various buttons and features is depicted. Instead of a definition below the four circles, with one shaded with blue, there are four new buttons, reading: “refresh, explain more, view media, and sources.” The refresh button is highlighted in pink indicating it is the feature that allows users to refresh the claim into language of similar registers. An arrow points to the four dots below the claim, indicating that they allow users to change linguistic registers. — The “refresh button” enables users to pull up the claim in a similar register (in terms of vocabulary, precision, and complexity). The “specificity slider” enables users to pull up a more precise, technical, and complex register.

Feature: Images

The expression of meaning shown visually through images, giphys, or other graphics referenced from external sources, which are inextricably attached to the claim, argument, sentence, or text snippet. Formats include: JPEG, TIFF, GIF, BMP, PNG, WebP, SVG, and others

The same white box with text and various buttons and features is depicted. In this image, the button for “view media” is highlighted in pink. Above the set of four buttons: “refresh, explain more, view media, and sources” is an infographic which explains how the novel coronavirus causes COVID-19. There are blue arrows to the left and right of the images. A note to the left of the image says “can flip between images, video, and audio,” indicating that the arrows can be used for that purpose. — Source: Visual Capitalist — https://www.visualcapitalist.com/visualizing-what-covid-19-does-to-your-body/

Feature: Videos

The expression of meaning shown visually through videos referenced from external sources, which are inextricably attached to the claim, argument, sentence, or text snippet (video with audio does not count as two distinct features). Formats include: MP4, MOV, MKV, and others.

The same white box with text and various buttons and features is depicted. In this image, the button for “view media” is still highlighted in pink. Instead of the infographic above the four buttons, there is a video and “play button” over the video. The video cover image shows someone in a hospital bed. A note to the left of the video says “can flip between images, video, and audio,” indicating that the arrows can be used for that purpose. — Example: “What is COVID-19” Youtube Video

Feature: Audio

The expression of meaning articulated through audio referenced from external sources, which are inextricably attached to the claim, argument, sentence, or text snippet (audio with video does not count as two distinct features). Formats include: MP3, WAV, AIFF, AU, PCM, and others

Feature: Contextual Explainer Paragraphs

Contextual explainer paragraphs which provide more broad context of the claim, argument, sentence, or text snippet itself or its connection with adjacent content.

The same white box with text and various buttons and features is depicted. In this image, the button for “explain more” is highlighted in pink. Instead of an image of a black audio waveform, there is a large explainer paragraph. The paragraph reads: “Coronavirus disease 2019 (COVID-19), also known as COVID, is a contagious disease caused by severe acute respiratory syndrome coronavirus 2 (SARS-CoV-2). The first known case was identified in Wuhan, China.” The text continues for several sentences. — Source: Adapted from the Wikipedia page on COVID-19

Feature: Sources

Contextual explainer paragraphs which provide more broad context of the claim, argument, sentence, or text snippet itself or its connection with adjacent content.

The same white box with text and various buttons and features is depicted. In this image, the button for “sources” is highlighted in pink. Instead of the explainer paragraph, there is a list of three sources. The sources are numbered one through three and are links to Wikipedia pages about COVID-19, the COVID-19 Pandemic, and Severe Acute Respiratory Syndrome.

Summary:

Since this is the first articulation of “web-based conceptual portmanteau” that we know of, it is understandably and assumingely the most clunky and cumbersome version of itself currently. We assume that more deeply integrated, intuitive, and slick depictions of this concept will be forthcoming.

We believe that the future of text includes a compound, multi-media representation of a claim which may be expressed as features in a package, such as our “node” structure. Text is two dimensional, but with the capabilities enabled by web-based technologies, the future of text can be multi-dimensional.

We thank you for reviewing our work. If you would like to work with the Society Library on this concept, please feel free to contact us:

Contact:

Website: SocietyLibrary.com
Email: Contact@SocietyLibrary.com

We again thank our volunteers Stephen Wicklund, Mike Kissinger, and Presley Pizzo for making “web-based conceptual portmanteau” possible at The Society Library.

If there are any errors, misattributions, or fallacies in this article, we ask that it be brought to our attention immediately. The Society Library is committed to accuracy in our content and we’ve signed the ProTruth Pledge.

The Society Library is a 501(c)3 non-profit digital library that builds educational databases of knowledge by extracting arguments, claims, sentiments, and evidence from books, academia, news, the web, and other media. The Society Library offers consultation services to improve logical, unbiased decision-making and teaches meta-literacy based programs and argument modeling through a variety of educational internships.

The UX Collective donates US$1 for each article published on our platform. This story contributed to World-Class Designer School: a college-level, tuition-free design school focused on preparing young and talented African designers for the local and international digital product market. Build the design community you believe in.