Combining character 2026-11-05
A combining character is an encoded text character intended to combine with another character in its written presentation. A familiar case is
U+0301 COMBINING ACUTE ACCENT: the sequence e followed by that code point represents an accented letter without requiring a separate precomposed code point for the whole letter.[ref]Characters and Combining Marks by the Unicode Consortium. Which character should I use for a given diacritical mark?
The same acute-accent code point can mark a distinct letter, stress or tone in different languages. Those functions do not require a different encoding of the accent in every language. Text shaping determines how the selected glyph is attached to the base shape, and glyph positioning can place additional marks relative to earlier marks.
A combining sequence and a grapheme cluster are related but distinct notions. The default segmentation rules determine which code points an editor treats as one unit. Unicode normalization addresses equivalence between encodings, such as a precomposed accented letter and a base-plus-accent sequence; it does not perform the geometric placement of their glyphs.
CSS glyph orientation 2026-11-05
CSS glyph orientation concerns how text's glyphs are oriented within a line. The
text-orientation property controls this aspect of vertical CSS typographic mode, separately from the CSS block flow direction supplied by writing-mode. In the pinned specification, the property has no effect on boxes in horizontal typographic modes.[ref]CSS Writing Modes Level 4 by World Wide Web Consortium. §5.1, Orienting Text, applicability and values
For an example, put
ABC in a box with writing-mode: vertical-rl. With text-orientation: mixed, this horizontal-script sequence is typeset sideways, rotated clockwise from its ordinary horizontal orientation. With text-orientation: upright, the letters keep their upright orientation and are arranged along the vertical line. These declarations change the treatment inside the line; they do not change vertical-rl's right-to-left block progression.[ref]The
mixed value, which is the initial value, uses sideways orientation for horizontal-only scripts and the intrinsic orientation for vertical scripts. The sideways value instead treats all text as a sideways horizontal layout. Consequently, mixed and sideways can agree for this simple Latin example without being interchangeable for every kind of text.[ref]CSS Writing Modes Level 4 by World Wide Web Consortium. §5.1, initial value and script-dependent meanings
Orientation can interact with directionality.
upright makes the used direction value ltr and treats the text as strongly left-to-right for bidirectional reordering, while leaving the computed value available for the specified inheritance behavior. A declaration that appears to concern only rotation can therefore have direction-processing consequences.[ref]CSS Writing Modes Level 4 by World Wide Web Consortium. §5.1, upright used-direction rule and accompanying note
The rendered result also involves text shaping and font support. Vertical typesetting can select alternate glyphs and use vertical metrics; punctuation can receive special orientation rather than follow a naive rotation of every outline. The example specifies orientation rules, not exact glyph positions or font-independent pixel dimensions.[ref]
CSS Writing Modes Level 4 by World Wide Web Consortium. §5.1.1, Vertical Typesetting and Font Features
Distinguishing glyph treatment from whole-box layout helps explain why vertical typography requires more than rotating a finished horizontal image. CSS typographic mode 2026-11-05
The CSS typographic mode determines whether text uses typographic conventions specific to vertical flow or is treated as horizontal typography. This distinction is separate from the orientation of the CSS writing mode: text can occupy a vertical flow while retaining horizontal typographic treatment.[ref]
CSS Writing Modes Level 4 by World Wide Web Consortium. §1, typographic mode definition; §3.2, writing-mode values
Under
writing-mode: horizontal-tb, both writing mode and typographic mode are horizontal. Under vertical-rl or vertical-lr, both are vertical. Under sideways-rl or sideways-lr, the writing mode is vertical but the typographic mode is horizontal. Thus the suffix that names block progression does not by itself identify the typographic conventions.[ref]CSS Writing Modes Level 4 by World Wide Web Consortium. §3.2, mode classification for each writing-mode value
For an illustrative token
漢A, compare vertical-rl with text-orientation: mixed against sideways-rl. In the first case, the vertical-script glyph receives its intrinsic vertical orientation while the Latin letter is sideways. The second mode treats the run as horizontal typography presented sideways. Both have right-to-left CSS block flow direction, but they need not produce the same glyph treatment.[ref]CSS Writing Modes Level 4 by World Wide Web Consortium. §3.2, sideways mode; §5.1, mixed orientation
This distinction matters for font selection of vertical glyphs, orientation and alignment. Vertical typesetting can use vertical metrics and alternate glyph forms rather than simply rotate all horizontal outlines. The example describes the specified categories, not an exact pixel measurement for every font.[ref]
CSS Writing Modes Level 4 by World Wide Web Consortium. §5.1.1, Vertical Typesetting and Font Features
CSS glyph orientation is another related layer of control. In the pinned specification,
text-orientation has an effect only in vertical typographic modes; setting it on a box using horizontal typographic mode does not turn that mode into vertical typography.[ref]CSS Writing Modes Level 4 by World Wide Web Consortium. §5.1, applicability of text-orientation
Keep CSS inline direction, block progression and typographic treatment distinct when diagnosing a vertical label. A change in the visible arrangement can come from different stages of the layout and text shaping process, so a single whole-box CSS transform is not a general substitute for specifying the intended typography.
Glyph positioning 2026-11-05
Glyph positioning assigns locations to the glyphs selected during text shaping. It specifies how each glyph is placed and how the logical pen position progresses through the text. A text baseline supplies a common reference for placing the shapes. An OpenType GPOS table can adjust horizontal and vertical placement, glyph advances and attachment between selected glyphs.[ref]
Glyph Positioning Table by Microsoft. Overview, ValueRecords and positioning/attachment lookup types
A simple coordinate model separates the two effects. Let be the pen position, a placement offset and the glyph advance. Draw glyph with its origin atthen update the logical position byChanging moves the current shape; changing moves the starting position of subsequent shapes.
For example, a combining character can select an accent glyph that must be positioned above an earlier base glyph. The accent's placement and its glyph advance answer different questions. Kerning similarly changes spacing according to context, while glyph substitution changes which forms are selected. These choices precede the rasterization of the placed outlines into pixels.
Glyph substitution 2026-11-05
Glyph substitution replaces selected glyph indices by other glyph indices while laying out text. In OpenType, the GSUB table specifies these replacements after the default character-to-glyph index mapping. A substitution can replace one glyph by another, several by a typographic ligature, or one by several; its application can depend on surrounding glyphs.[ref]
Glyph Substitution Table by Microsoft. Overview and Lookup Types1–6: input/output glyph indices, ligatures and contextual substitution
For a hypothetical computer font, suppose
f and i initially select indices17 and23. A matching ligature rule could replace the pair by index91. These numbers belong to that particular computer font; they do not change the stored Unicode sequence into code point91. The example also shows why substitution differs from kerning: replacing the pair selects a new shape, whereas adjusting the pair's positions can retain both original shapes.Lookup order matters when one substitution creates or removes the input pattern for a later substitution. Text shaping must therefore interpret the applicable OpenType rules, rather than independently choosing a default glyph for each text character.
Grapheme cluster 2026-11-05
A grapheme cluster is a sequence of Unicode code points treated as a unit by a text-segmentation rule. Default extended grapheme clusters approximate user-perceived characters, supporting operations such as moving a text cursor or deleting a visible unit. They are not a universal linguistic definition of a text character; boundaries can require language-specific tailoring.[ref]
Unicode Text Segmentation by the Unicode Consortium. Sections1,3 and3.1.1: purpose, extended clusters and default boundary rules
For example,
e followed by the combining character U+0301 COMBINING ACUTE ACCENT contains two code points, but forms one default extended grapheme cluster. Its UTF-8 representation has three bytes: 65 CC 81 in hexadecimal notation. The precomposed U+00E9 also forms one grapheme cluster, with two UTF-8 bytes, C3 A9. The two representations correspond under the canonical rules of Unicode normalization.[ref]Unicode Normalization Forms by the Unicode Consortium. Sections1.1–1.3: canonical equivalence, decomposition and composition
A glyph count answers another question: text shaping can represent the two text characters
f and i by one typographic ligature even though their default grapheme cluster boundary remains. Byte offsets, code point offsets, grapheme cluster boundaries and glyph indices therefore serve different purposes. Kerning 2026-11-05
Kerning adjusts spacing for particular combinations of glyphs. For example, the open region beneath an overhanging “T” can allow a following round glyph to be placed closer than a uniform spacing rule would suggest. The OpenType
kern feature provides context-dependent adjustments for horizontal layout; the separate vkrn feature addresses vertical layout.[ref]Kerning in the OpenType Registered Features by Microsoft. Feature kern: function, To example and relation to vkrn
In a simplified horizontal pair model with default glyph advances and adjustment , the total advance is . A negative reduces the gap for that pair, while a positive increases it. The numerical value depends on the computer font, its scale and the applicable layout rules; a particular letter pair does not have one universal adjustment.
Kerning is one application of glyph positioning. It can preserve the same glyph indices while changing their arrangement. A typographic ligature instead selects a combined form through glyph substitution. Selecting an appropriate form and placing it well are complementary parts of text shaping.
Letter spacing 2026-11-05
Letter spacing, also called typographic tracking, adjusts spacing within a run of text. It is distinct from word spacing and from context-sensitive kerning. In CSS, the
letter-spacing property controls additional spacing, with rules that respect the writing system rather than blindly separating every stored character.[ref]Text in Cascading Style Sheets Level 2 Revision 2 by World Wide Web Consortium. §16.4: letter-spacing and distinction from kerning
[ref]CSS Text Module Level 3 by World Wide Web Consortium. §7.2: typographic character units and cursive scripts
A simple model illustrates the geometry. Suppose four already shaped units have combined advance , and three selected internal gaps each receive an extra . ThenThis is an explicitly chosen three-gap model. A glyph need not correspond to one stored character, so counting source characters is generally insufficient to determine those gaps. Text shaping, typographic ligatures and the script's joining behaviour must be considered when deciding where spacing may change.
Logical text order 2026-11-05
Logical text order is the order in which text characters are represented in a stored sequence for interpretation. A bidirectional renderer derives visual text order from that sequence; it does not require the stored characters to be prearranged in screen-position order.[ref]
Unicode Bidirectional Algorithm (Revision 51) by the Unicode Consortium. section1: logical order and display order
An original indexing example uses six abstract items. Write the stored positions in order asThe labels each stand for a single right-to-left text character. All displayed arrays here are read physically from left to right. Applying level-based reordering of bidirectional text to these supplied levels gives the visual list , whose source-position list is . Stored position1 remains position1 even though its item is drawn near the right end.
This distinction makes a text-processing task precise. An operation on logical positions1 through4 selects the contiguous stored subsequence . A renderer may need a position map to relate that range to its displayed cells. Sorting characters by screen coordinate before searching or serializing the text would change the sequence being processed.
Logical order does not determine a font's glyph geometry. Text shaping, line layout and the Unicode Bidirectional Algorithm contribute different information. For example, a different line break can change which items are reordered together while the underlying stored sequence remains the same.[ref]
Unicode Bidirectional Algorithm (Revision 51) by the Unicode Consortium. section3.4, per-line reordering; section3.5, shaping
OpenType 2026-11-05
OpenType is a table-based computer font format separating glyph representations, character mapping, measurements, naming metadata and optional layout rules. Its
cmap table selects default glyph indices for encoded text characters; substitution and positioning tables support more elaborate text shaping.An OpenType computer font can contain TrueType outlines or Compact Font Format outlines, and the specification also provides for bitmap and other glyph representations. The file format therefore does not prescribe a single kind of outline geometry. Extensions such as
.ttf and .otf are useful conventions, but the actual table contents determine the available representation.[ref] Text character 2026-11-05
A text character is an abstract unit of written information, distinguished from its visible glyph and from the bytes used to store it. A Unicode code point identifies an encoded character; UTF-8 specifies a byte representation. Neither counting bytes nor counting code points always counts what a reader perceives as individual characters.[ref]
For example, an accented letter can be represented by a base letter followed by a combining accent. The sequence can be treated as one grapheme cluster, while a computer font and text shaping determine its displayed form. Conversely, the two text characters “f” and “i” can remain distinct in stored text while appearing as one typographic ligature. This is why a text editor's cursor movement, a byte offset and a glyph index answer different questions.
Text shaping 2026-11-05
Text shaping turns a sequence of Unicode text characters into a layout of glyphs from a chosen computer font. The result includes glyph indices, positions and glyph advances. A text character therefore does not determine a visible shape independently of its neighbors, writing system and selected computer font.[ref]
Shaping concepts in the HarfBuzz Manual. Text shaping: Unicode input, font-dependent two-dimensional glyph layout and shaping models
For example, the stored sequence
f followed by i can become a single typographic ligature. Contextual Arabic forms illustrate a different requirement: a letter's neighbors influence the selected glyph. Glyph substitution chooses forms, while glyph positioning places the chosen forms; kerning adjusts their spacing. These operations can preserve the original Unicode text, so copying text should not be implemented by reading glyph indices as if they were code points.[ref]Glyph Substitution Table by Microsoft. Overview: Arabic contextual forms, Latin ligatures and the character/glyph distinction
Text shaping precedes rasterization: first determine what shapes to draw and where; then determine the pixels that represent those shapes at the requested size.
Unicode Bidirectional Algorithm 2026-11-05
The Unicode Bidirectional Algorithm computes visual text order from logical text order. Unicode bidirectional classes and context determine bidirectional embedding levels: levels with an even integer value run left-to-right, and those with an odd integer value run right-to-left. Stored code points retain their order; text shaping is separate.[ref]
After levels and line boundaries are resolved, level-based reordering of bidirectional text descends from the largest level to the smallest level that is an odd integer. Each pass reverses maximal consecutive runs at or above its level.[ref]
Unicode Bidirectional Algorithm (Revision 51) by the Unicode Consortium. §3.4, rules L1–L3, especially L2
Here is a small example with the resolved levels supplied. The labels each represent a distinct right-to-left text character, while represent left-to-right text characters. All rows below are written in physical left-to-right order. Start withThe level 2 pass changes the middle digits to . The level 1 pass then reverses the whole five-item middle run, producingThe digits have been reversed twice, preserving their original internal order. Reversing the entire stored sequence once would instead exchange and and leave the digits in the wrong order. This example demonstrates the reordering step, not how all Unicode bidirectional classes are resolved.
Two level-based reversals preserve the internal order of the digits
. Original illustration with supplied bidirectional embedding levels. The boxes denote individual abstract text characters, not literal multi-character labels. Details.A bidirectional isolate limits directional interaction between inserted text and its surroundings. Markup can express isolation without storing explicit formatting code points.[ref]
Unicode directional control 2026-11-05
A Unicode directional control is a formatting code point that affects bidirectional processing without contributing an ordinary visible letter. Directional marks, embeddings, overrides and isolate delimiters provide different mechanisms within the Unicode Bidirectional Algorithm. They affect interpretation of the stored sequence rather than supplying new letter shapes.[ref]
Unicode Bidirectional Algorithm (Revision 51) by the Unicode Consortium. section2: directional formatting groups and their behavior
Left-to-right and right-to-left marks, LRM (
U+200E) and RLM (U+200F), behave as strong directional items while remaining invisible. A right-to-left isolate initiator, RLI (U+2067), instead starts a bounded bidirectional isolate; PDI (U+2069) terminates it. A mark and a span delimiter therefore carry different structural information.[ref]Unicode Bidirectional Algorithm (Revision 51) by the Unicode Consortium. sections2.4–2.6: isolates, termination and directional marks
An original counting example documents controls by their numerical values. The sequence
U+2066 U+0061 U+0062 U+2069 contains LRI, the two Latin letters a and b, and PDI. It contains four code points and eight UTF-8 bytes: three for each delimiter and one for each Latin letter. Its ordinary visible letters are just a and b. Counting visible letters would therefore lose information about the represented sequence.This notation intentionally shows the control values instead of placing hidden directional formatting characters in the source example. To reproduce an actual layout test, record its logical text order, paragraph direction, Unicode version and line boundaries, then compare the computed bidirectional embedding levels and visual text order.
A higher-level format can express equivalent directional structure through markup. The control-code-point representation and the markup representation need not have the same stored characters even when they request corresponding layout behavior. The specification defines those correspondences, while text shaping remains a further part of rendering.[ref]
Unicode Bidirectional Algorithm (Revision 51) by the Unicode Consortium. section2.7: markup equivalents; section3.5: shaping
Visual text order 2026-11-05
Visual text order is the ordering of displayed text items within a rendered line. In bidirectional text it can differ from logical text order, the stored character sequence. It describes a presentation result, so the line boundaries and resolved directional information belong to its context.[ref]
Unicode Bidirectional Algorithm (Revision 51) by the Unicode Consortium. section1 and section3.4: storage, display and line reordering
For an original permutation example, take six logical items with supplied levels . The resulting left-to-right display positions contain source indicesThus the displayed items are . The digits keep their internal order even though the surrounding right-to-left items exchange physical positions. A single reversal of the whole stored list would give a different result.
A position map preserves information that a picture alone may lose. If two source items both display as the same letter, their appearances do not reveal which logical index each came from. A renderer can retain distinct indices while drawing identical shapes. Likewise, interpreting a pointer position as a text location requires more information than simply treating a visual column number as a logical index.
The Unicode Bidirectional Algorithm orders text items, while text shaping determines additional glyph forms and combinations. Distinguishing these stages prevents a permutation of character positions from being mistaken for a complete specification of glyph geometry.[ref]
Unicode Bidirectional Algorithm (Revision 51) by the Unicode Consortium. section3.5: interaction with shaping
Visual order is therefore useful for describing what appears on a particular line, while logical text order supplies stable positions for the represented sequence. Reporting both orders and their mapping makes an example reproducible without assuming that the reader's own browser will display a mixed-direction string in the intended way.
Word separator 2026-11-05
A word separator is a text unit whose primary role is to separate words. Unicode SPACE U+0020 and non-breaking space U+00A0 are common examples. In CSS, the word-separator classification helps determine where word spacing is applied after white-space processing.[ref]
CSS Text Module Level 3 by World Wide Web Consortium. §7.1: word-separator characters and extra spacing
Separation and line breaking are related but distinct. In a suitable ordinary text context, a normal space between
10 and kg provides a possible break. Using a non-breaking space there keeps the number and unit together at that boundary. Both characters can still provide visible separation.[ref]Unicode Line Breaking Algorithm by the Unicode Consortium. Line-breaking properties: GL class and rules LB12/LB12a
A language can also write words without visible separators, so a count of space characters is not a universal word-counting method. Text shaping, word spacing and permitted breaks must follow the appropriate text-processing rules. A separator's stored character and the selected glyph advance jointly participate in the geometry.

