Name ruby association & layout proof

Attach the reading before you adjust the frame

A small annotation can change how a name is learned. A reader sees a written identity and, beside it, another string that tells them how the author wants this occurrence to be read or understood. If that relationship moves during layout, the page can communicate a different naming decision even though every character survives. The first question in this workbench is therefore which text belongs together. The second is whether the declared arrangement fits a particular browser frame.

Use this page when you already have the base text and an explicitly supplied annotation. It is useful for a comic credit, an illustrated name card, a fiction sample or an HTML handoff to another editor. It does not find a reading from kanji, establish an etymology or certify that an invented pairing is a conventional Japanese name. Keep the evidence for an attested reading in a separate source record. The initial stage names and their annotations here are original fictional examples.

The distinction from a general lettering preview is practical. A full-name width can be acceptable while its annotation is badly associated or extends beyond the intended frame. Conversely, a correct association can need a larger frame. Changing the association to satisfy a width check is a creative revision that needs an explicit decision, rather than an invisible layout repair.

Original fictional scene: the lantern program

The program for a small lantern performance had space for a narrow vertical credit beside each costume sketch. One performer used the written stage name 羽灯 and had chosen the whole-name reading ほの. Both the pairing and the event are invented for this example. No dictionary derivation is implied. The name appeared on the costume case as a complete mark, and the performer wanted the program to introduce that same identity to an audience encountering it for the first time.

The program designer made a second version: 羽 with ほ beside it, then 灯 with の beside it. The strings looked conveniently short in the layout file. A costume maker asked whether the performer had chosen those individual correspondences. The designer had no record of that choice; dividing the annotation had simply seemed an efficient way to make the credit fit. The new arrangement had preserved the letters while adding a more specific association.

The performer preferred to keep the whole-name relationship. The team compared two explicitly labelled records instead of overwriting the first. They widened the credit area and moved the costume sketch slightly. That revision cost some illustration space but preserved the chosen introduction. They also kept a guest’s written credit without inventing the reading that had not yet arrived. The unannotated guest name was a visible unresolved task, rather than evidence that the finished credit would occupy the same space.

The story turns on self-presentation and production trust. A segmented annotation could be appropriate if the performer actually chose it; the software cannot decide that choice. If the program used only a parenthetical whole-name reading, the identity could still be introduced, but its placement and visual relationship would differ. If the writer gave the character an entirely unrelated written stage name, the link to the costume case would need to be established elsewhere. Apply the method by identifying the relationship your scene needs before optimizing the rectangle that contains it.

Write a contract that another editor can follow

Each record has an id, a person, a literal base and an ordered segments array. The record ID identifies this proof or production occurrence. The person ID identifies its bearer. Two proofs can belong to one person, and two different people can have identical visible names. Neither equality should erase a production record. Use record IDs such as program and split-proposal to make an alternative legible without pretending the alternative has already been adopted.

Concatenate the base text of every segment in order. The result must exactly equal the record’s base. A missing space, an omitted character or a different Unicode sequence causes a conflict. The workbench does not normalize the text to obtain a convenient match. That makes the contract stricter than a casual visual comparison, which is useful when a designer must preserve a spelling across files.

Three association kinds are supported. A plain segment has no annotation and explicitly uses reading: null. A mono segment attaches an annotation to one base grapheme. A group segment attaches the supplied annotation to the supplied base segment as a unit. The workbench never distributes a group reading across individual characters. It also does not implement every possible ruby association or the full Japanese composition system.

W3C’s Rules for Simple Placement of Japanese Ruby discusses mono, group and jukugo relationships as distinct arrangements. We use that reference for terminology and the need to preserve correspondence, rather than claiming to implement its complete placement method. Its published 2020 text is a Working Draft, not an endorsement of this website. The reference link and its scope appear below the guide.

Run the initial comparison without inventing evidence

Leave the three sample records in place and build the proof. Program binds 羽灯 to the complete annotation ほの. Split-proposal explicitly binds 羽 to ほ and 灯 to の, while retaining the same person ID. Unresolved-credit has a different person and a null annotation. The tool shows all three association maps, including the incomplete record. It does not choose the first or second as the correct reading.

Now change only the second record’s segments to one group association. Its markup and map should change; its base and person should remain fixed. If you instead shorten one segment without updating the complete base, the contract fails. Read the conflict before editing the spelling. Removing a character merely to make validation pass can destroy the continuity you were trying to check.

You can use several plain and annotated segments in one record, including an intentional plain space. A plain segment’s null does not mean missing evidence: it declares that no annotation belongs there. Null on a mono or group segment has a different meaning and stays unresolved. An empty or blank annotation is not accepted as a substitute for that explicit state.

Measure the object you intend to produce

The frame has physical width and height in CSS pixels, a one-pixel border and twelve pixels of inner padding. Width and height each accept 40–1000. The base size accepts 12–80, the annotation ratio 0.25–1 and the line-height ratio 1–3. Decimal ratios are allowed. These are bounded production controls, not a scoring formula for beauty or readability.

Horizontal mode and vertical mode change the actual writing direction of the preview. In vertical mode, columns progress from right to left. Both physical dimensions still matter. A name that has room across a horizontal frame can exceed the vertical frame’s inline extent, while a different arrangement may create extra columns. The tool does not silently shrink either the name or the annotation to make a green result appear.

The preview area can scroll when the declared frame is larger than the available screen. That local scrolling preserves the requested proof dimensions. It is separate from the site navigation, which has no internal scrolling. On a phone, inspect the frame and the measurement status together; fitting the phone viewport is not the same question as fitting the production frame.

The documented browser policy keeps an annotated segment together in an inline block, centers its ruby and places the annotation on the over side. Plain text retains its authored spaces. This is a deliberate simple proof policy. It does not reproduce every publisher’s overhang rules, sophisticated compound-ruby treatment, line justification or exclusions around artwork. A separate art obstacle is not represented by merely making the rectangular frame smaller.

Read a measurement with its limits intact

The live proof waits for the browser’s font readiness, then observes base, annotation and plain-text rectangles. It compares their combined extent with the inside of the declared border. The result reports observed width and height, edge excess and an overflow decision with a half-CSS-pixel tolerance for tiny boundary differences. It is a geometric check of the current rendering, not a percentage of people who can read the name.

Before JavaScript runs, the initial page contains a readable association example and an explicit pending-measurement label. A pure rule calculation cannot establish actual browser fit. If the browser cannot provide usable rectangles, the tool reports measurement unavailable instead of treating missing data as zero width. A missing annotation can have measurable base text, but its status remains incomplete; those dimensions do not establish that the completed ruby will fit.

Choose a local Mincho-style, Gothic-style or monospace stack to compare a different rendering. A requested font may be absent and replaced by its fallback. Successful font readiness and sensible rectangles do not prove that the requested face supplied every glyph. The output therefore leaves font coverage unknown. Verify the exact font file, artwork, print process and export application in the production environment that will actually carry the credit.

Pass on the association, not just a screenshot

A complete record provides a dedicated HTML copy and an HTML download. The document contains escaped base and annotation strings, readable ruby fallback parentheses and the declared frame settings. Supplied angle brackets stay text; they do not become executable elements. The exported proof contains no network font import, manuscript upload or external script. It can still be a private creative file that reveals an unpublished name or reading.

The plain-text association map is useful when another application cannot use ruby. Treat a parenthetical representation as an explicit fallback convention, not identical typography. Inspect how your destination handles parentheses, spaces and multiple annotation groups. The dedicated complete HTML controls remain disabled for an unresolved record, so the absence of a reading cannot silently become a complete-looking handoff.

Observed-dimension downloads retain the record and person IDs, associations, settings and the actual measurement state. A general result export also contains task details and may include private notes or handoff material. Save a project when you need editable inputs; a screenshot alone cannot restore the exact annotation contract. Restoring a project renders again in the current browser rather than promising that a previous machine’s font geometry will recur.

Fix the cause of a failed proof

Start an exact-reconstruction conflict by comparing the declared base with the concatenated segments. Look for literal spaces and Unicode differences before considering a spelling change. Start a mono conflict by checking whether you supplied several graphemes as one single-base association. If the reading belongs to the whole string, a group may express your intention; if separate correspondences are known, supply them explicitly. The tool cannot establish those correspondences for you.

For geometric overflow, first identify the excess edge and the association that occupies it. Try the frame, writing direction, font stack, size ratio or line spacing while preserving the original contract as a comparison record. An annotation can extend beyond a frame even when the base looks short. A small frame with an incomplete reading should never be chosen merely because it currently displays fewer marks.

Keep a change history at the creative decision level: which relationship was preserved, which production constraint changed and who should review the destination file. A larger frame can be the right repair. A deliberately revised stage name can also be right, but it changes more than a rectangle. The useful proof is the one that lets your collaborator see that difference without inventing an etymology, a new person or a false approval.

Can this tool split an attested whole-name reading across kanji?

No. Supply the exact correspondences you have evidence for, or retain the whole-name group. Accepting a declared split checks structure, not the truth of a reading.

Why does the incomplete credit have dimensions but no complete HTML button?

Its visible base can be measured while an annotation is missing. Those dimensions do not prove the finished ruby fits. Complete markup is withheld for that record until its annotation is supplied.

Does a local font stack prove every glyph is supported?

No. Fallback can produce a measurable rectangle. The output leaves font coverage unknown and requires a separate check in the actual production environment.

What changes when I restore a saved project?

The exact source associations and layout settings return. The current browser renders again; no old machine’s dimensions or approval are silently restored.