Hyphenation

100%

✓ Published0🌍 Public

Last edited Dec 10, 2019

Created on Dec 10, 2019

This example demonstrates how CSS hyphenation automatically breaks a long quotation to fit a narrow text column, creating a justified, evenly spaced block of text. The HTML contains a single sentence from Oscar Wilde, while the CSS sets a fixed width, serif typography, and text justification. The `hyphens: auto` property, combined with the `lang` attribute implied by the content, enables automatic hyphenation. The JavaScript file only contains a commented-out alert, so no interactive behavior occurs. The dabblet is styled using standard CSS without external libraries.

AI-generated description

Similar vizzes

Loading thumbnail…

A quote from The Elements of Typographic Style by Robert Bringhurst

This example visualizes typographic guidance from Robert Bringhurst’s *The Elements of Typographic Style* as an interactive text layout. It shows how different dash characters—hyphens, en dashes, and em dashes—occupy varying horizontal widths, rendered as animated glyphs that respond to pointer movement. The visualization uses Three.js to draw each character as a 3D mesh, with `d3.forceSimulation` arranging the dash specimens in a scattered, weighted distribution that mirrors their typographic relationships. The scene’s depth-of-field and lighting are computed via WebGL shaders, while the source text is parsed from the included `quote.markdown` file.

DDylanFM

65% match

Loading thumbnail…

CSS Columns

This example demonstrates text content arranged in multiple columns using CSS multi-column layout. The page shows a series of paragraphs flowing across four columns defined with the `columns: 4 250px` property, with a three-pixel solid column rule and a three-rem gap separating them. One quote is styled with a larger font, centered text, and a `column-span: all` property to break across all columns, while the author attribution uses `white-space: nowrap` to prevent line breaks. The code relies on the standard CSS Multi-column Layout module and the Roboto font loaded from Google Fonts.

WWRCIECH

62% match

Loading thumbnail…

Gist de30f3fbfcf277da051e

This example demonstrates a text-balancing technique that adjusts the spacing of words within a paragraph to create a visually even, block-like layout. It shows how justified text can be manipulated so that each line fills the container width more uniformly, improving the appearance of dense typographic blocks. The code relies on the jQuery library and a custom `smartresize` event handler to recalculate text wrapping on window resize. It also implements a debouncing function to limit the frequency of resize-triggered updates, ensuring smooth performance during interactive adjustments. The underlying logic inspects the element’s computed text-align property to conditionally apply justification, while preserving the original DOM structure through careful tag and span manipulation.

CCindyJonesHulfachor

62% match

Loading thumbnail…

HTML Face

This example demonstrates a minimal HTML page that uses CSS styling to create a playful, large-scale typographic layout. The page contains two styled text elements, “Hello HTML!” and “blub,” with distinct font sizes and text alignment, showcasing basic document structure and style separation. The code relies on standard HTML elements and embedded CSS within a `<style>` tag, with no external JavaScript or data sources. It serves as a foundational demonstration of how CSS can control visual presentation in a bare-bones web document.

Mmarkus1234D

61% match

Loading thumbnail…

HTML_basics

This example demonstrates a minimal HTML page with styled paragraphs, showing how CSS selectors target specific elements. It uses plain HTML tags and an embedded `<style>` block, with an `id` selector for the first paragraph and a type selector for all paragraphs. The page includes two short text passages, one describing a D3 workshop, and relies on basic document structure with `<header>` and `<body>` elements. No external libraries are used; it is a static HTML/CSS demonstration of fundamental styling and markup.

AAlbertFranco

61% match

Loading thumbnail…

Untitled

This example presents a single, large monospaced line of text that changes color from black to red. It demonstrates a minimal typographic interaction using plain HTML and CSS, with no external libraries or JavaScript. The visible data is the text itself, which the viewer reads as a static sentence; the only dynamic behavior is the style change triggered by a user action, such as hovering or clicking. The rendering relies on the browser’s default text layout, with the `:hover` or `:active` pseudo-class from CSS providing the color transition.

Ggavriel-binshtok

60% match

Loading thumbnail…

Hello there

This example presents a static HTML page that displays two large, colored text elements. The page uses a hypertext markup language (HTML) structure with external Cascading Style Sheets (CSS) styling. The CSS styles the main heading and a paragraph, applying specific fonts, sizes, and colors. The page does not incorporate any JavaScript libraries, data visualization frameworks, or dynamic data sources, rendering only static text content without interactive features.

EEagleV22

60% match

Loading thumbnail…

Untitled

This example presents a minimal, unstyled HTML page titled "Intro to HCS" that loads a stylesheet and an external JavaScript script. The page itself contains no visible content. The CSS sets a large, monospace font for the body and defines a `.highlighted` class that colors text red, though no elements with that class exist in the markup. The visualization relies entirely on the external script, whose logic is not shown here. The page uses standard HTML, CSS, and an unspecified JavaScript library, likely D3.js, to create any dynamic or interactive elements.

DDrexBuzz

60% match