Skip to main content
SimilarExport ZIP
100%

writing-mode

✓ Published0🌍 Public
335degrees
Last edited Jun 20, 2017
Created on Jun 20, 2017

This example demonstrates the behavior of the SVG `writing-mode` attribute, which rotates text vertically along the y-axis, and compares it with the `glyph-orientation-vertical` attribute for controlling glyph orientation. It shows two vertical text labels, one relying solely on `writing-mode` and the other adding `glyph-orientation-vertical`, set against reference lines and stroke-cap style comparisons. Built with D3 v4, the visualization uses chained SVG elements—`text`, `polyline`, and `line`—to illustrate how text rotation interacts with graphic primitives. The code appends these shapes to an SVG container, styling them via inline attributes and CSS classes. The example serves as a low-level reference for text layout and stroke rendering in SVG.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/35degrees/'>35degrees</a>'s block: <a href='http://bl.ocks.org/35degrees/696596b6cf8a7932884ad0ef72928f16'>text example</a>

forked from <a href='http://bl.ocks.org/35degrees/'>35degrees</a>'s block: <a href='http://bl.ocks.org/35degrees/8a2bcd867fccf7394c5c149e53b0d9e2'>transform, translate example</a>

forked from <a href='http://bl.ocks.org/35degrees/'>35degrees</a>'s block: <a href='http://bl.ocks.org/35degrees/e2fc6c90c9d38cc6ae19f6dda8759310'>transform, scale example</a>

forked from <a href='http://bl.ocks.org/35degrees/'>35degrees</a>'s block: <a href='http://bl.ocks.org/35degrees/87187327885c9f235217daa23e2f7a57'>transform, scale example</a>

forked from <a href='http://bl.ocks.org/35degrees/'>35degrees</a>'s block: <a href='http://bl.ocks.org/35degrees/4d951e9b64c4dd1ad021307864e8b124'>transform, scale example</a>

forked from <a href='http://bl.ocks.org/35degrees/'>35degrees</a>'s block: <a href='http://bl.ocks.org/35degrees/7e9397a80add2f981127f0461dca2e87'>textLength, spacingandglyphs example</a>

forked from <a href='http://bl.ocks.org/35degrees/'>35degrees</a>'s block: <a href='http://bl.ocks.org/35degrees/1096d5c4e2e2765fd169d4a3d34cd11a'>opacity vs. fill-opacity example</a>

mit Licensed

Similar vizzes

Loading thumbnail…

text example

This example demonstrates basic SVG text placement and shape rendering using D3 v4. It positions three text elements with different anchor alignments (start, middle, end) along a horizontal line, showing how the `dx` and `text-anchor` attributes affect text positioning. A polyline traces a jagged path across the canvas, and a circular dot with a lime-green stroke and Indian Red fill uses CSS hover effects to expand its radius and stroke width. The visualization uses D3's selection methods to append elements to an SVG container, with styling applied through inline attributes and CSS classes.

335degrees
78% match
Loading thumbnail…

text example

This example demonstrates how SVG text elements can be positioned and anchored in different ways within a D3 v4 visualization. It shows three text strings placed at the same x-coordinate but with distinct text-anchor values (start, middle, end) and dx offsets, illustrating how alignment affects placement relative to the anchor point. The code also includes a simple circle with a CSS class that applies a hover effect, increasing its radius and stroke width. Using D3's selection and append methods, the visualization creates an SVG canvas and populates it with static text and a single interactive dot.

335degrees
77% match
Loading thumbnail…

textLength, spacingandglyphs example

This example demonstrates how SVG text can be stretched to a specified width using the `textLength` and `lengthAdjust` attributes, with `spacingAndGlyphs` adjusting both spacing and glyph shapes. A single line of text is rendered inside an SVG canvas and positioned via a `transform` that combines translation, scaling, and rotation. Two polylines cross at the origin to mark the reference point. The code uses D3 v4 to select the body, append the SVG, and add the text element, while the polylines are drawn with standard SVG attributes. The text is styled with a CSS class, though the hover effect on dots is not triggered here.

335degrees
72% match
Loading thumbnail…

transform, scale example

This example demonstrates how SVG transform chaining applies scale and rotation to a text element relative to a fixed coordinate system. The code renders a single text label ("that's the way") positioned at the center of a canvas, with a green crosshair polyline marking the reference point. Using D3 v4, the script selects the body, appends an SVG container, and applies a transform attribute combining translate, scale, and rotate operations. The visual result shows the text enlarged and tilted around its anchor, while the polyline highlights the origin. The example relies on D3's selection and attribute methods, with SVG elements styled via CSS classes.

335degrees
72% match
Loading thumbnail…

text path example

This example demonstrates how to render text along curved SVG paths using D3 v4. Two dashed, tomato-colored paths are drawn on a light gray canvas, and each path serves as the baseline for a line of text. The text elements are anchored at the midpoint of their respective paths using `text-anchor: middle` and `startOffset: 50%`, with steel-blue fill from the CSS. The visualization shows how D3’s `d3.line()` with `curveBasis` can generate smooth, arbitrary paths, and how SVG's `<textPath>` reuses those paths to align text along the curves, illustrating a simple technique for creating curved typography.

EEE2dev
72% match
Loading thumbnail…

transform, scale example

This example demonstrates how D3’s `transform` attribute applies scaling and rotation to SVG text. The text "that's the way" is positioned at (200,200), scaled by a factor of 3, and rotated 20 degrees, all within an SVG canvas. Two reference polylines cross at the text’s origin to highlight the transformation’s effect. The code uses D3 v4 to append the SVG, set attributes like `transform`, and style elements via CSS classes. Hover interactions on `.dot` elements are defined but unused here. The rendering is purely SVG, with no external data source.

335degrees
71% match
Loading thumbnail…

Fun with &lt;text&gt;

This demo shows three different SVG techniques for giving `<text>` elements a white outline so they remain readable on varied backgrounds: two stacked text elements with a thick stroke, one text element using the `paint-order` attribute, and a `<filter>` with `feMorphology`, `feColorMatrix`, and `feMerge` effects. A dark green backdrop provides contrast. The D3 v4 code includes zooming and panning via `d3.zoom`, and interactive controls adjust font size, stroke width, rotation, and other text properties. Users can set initial camera position and parameters through URL search parameters.

HHerst
71% match
Loading thumbnail…

Fun with &lt;text&gt;

This example demonstrates three different SVG techniques for adding a white outline to text so it remains legible over any background. The first uses two stacked `<text>` elements, the second relies on the `paint-order` attribute, and the third applies a `<filter>` with `feMorphology`, `feColorMatrix`, and `feMerge`. The map is interactive with d3.zoom for panning and zooming, and controls adjust font size, stroke width, rotation, and other text properties.

HHerst
71% match