01Which Margin Are We Aligning?
I’m Quinn Keaveney,speaking from Vancouver. We build websites for type foundries,and this is a small problem we keep meeting: a text box can be aligned while its punctuation makes the edge look uneven.The recorded detail shows an internal opening quote. Let’s choose the edge, the mechanism, and the amount.
02Start with native CSS
Start with the platform.If you want an opening mark on the first formatted line, native hanging punctuation may be enough. This example also allows eligible stops and commas to hang conditionally, and handles eligible final punctuation.Leave room outside the text. This code follows the specification; we haven’t compared supporting engines.
03One quotation? Use an indent
For one known pull quote,a manual indent is often simpler. Matching padding and a negative first-line indent let you tune that opening in its actual typeface. The amount here is illustrative. It doesn’t discover punctuation after reflow.That’s a useful boundary: don’t add a paragraph-processing tool when one editorial adjustment solves the design.
04Then the paragraph wraps
The harder case is an opening mark inside the paragraph.When a responsive column narrows, a quotation that once sat mid-line can become a line start. Native first-line behavior doesn’t express that general Latin case.The CSS working group has discussed this distinction. That discussion is context,not evidence that our JavaScript implementation is correct.
05An internal quote, observed
Here’s the recorded browser specimen,with its guides intact. At a fourteen-forty-pixel viewport and fifty-four percent column width, the sixth line begins with an opening quote. Look below the preceding line: the quote protrudes left of the guide.That’s eight and a half CSS pixels in the original layout. The detail is magnified.
06Change the edge, keep the test
In separate fifty-percent-width control checks,Left alignment keeps the start treatment; Right keeps the end treatment. Turn off the corresponding control and that treatment disappears. At a maximum hang ratio of zero, no hangs remain.These checks use a different width from the internal quote. They show which edges the policy treats.
07Advance is not optical correctness
The implementation measures a character’s rendered advance,then applies an authored fraction, subject to limits. Canvas fallback is approximate; the recorded specimen used DOM geometry. Neither method measures the perceived edge.Different drawings can need different amounts. Try a smaller fraction, compare the whole paragraph, and decide whether the result suits the typeface.
08Some marks should stay flush
There’s another limit.A negative margin can make room for a word to move onto the previous line. The implementation checks for unstable treatments and can leave a mark flush. That’s a deliberate compromise, not a promise that every eligible mark will hang.Inspect reflow in the layout you’ll actually ship, including the space outside its container.
09Keep two kinds of evidence apart
We’ve observed horizontal, untransformed Latin text in Chromium.We haven’t measured a native-supporting engine against the same specimen. So the native alternative comes from the CSS specification; the displacement comes from browser observation.Neither establishes reading speed or comprehension. Other engines, transformed layouts, font-loading behavior, selection, and assistive technology need tests appropriate to the project.
10Choose the smallest sufficient fix
My recommendation is conditional.Use native CSS where its behavior meets the design. Tune an isolated quotation manually. Consider JavaScript when a real responsive Latin paragraph needs internal-line control. Keep an untreated reference, try narrower widths, and change the fractions with the typeface.If the result doesn’t help the composition, leaving ordinary text alone is a valid choice.
11Keep the judgment visible
Before accepting a treatment,keep an untreated reference and inspect the actual line at your intended widths. Check whether punctuation is clipped and whether the amounts suit the page. Adjust the fraction or leave the edge untreated when that works better.Keep that editorial choice visible alongside the measurement, so the next person can review it.
12We’re Overpunch
We’re Overpunch.We’ve spent more than fifteen years building websites for type foundries. We make Type Tools, and Typetin, our storefront for independent foundries, is in development. The paper, transcript, measurements, and other tools are linked at opticalmargin.com.Try the specimen with your own layout and your own judgment. Thank you.