vasilenko.info

Typographer: guillemets, dashes, nonbreaking spaces

/en/tool/typograf/ works The browser edits text; the server fetches pages by URL

Paste text, upload a file, or enter a page URL. Typographer processes the input — in HTML and Markdown mode, it edits only visible text and leaves tags, attributes, entities, and code untouched — then adds quotation marks, dashes, nonbreaking spaces, and punctuation. The Changes panel shows every edit: which rule was applied, what came before, and whether it can be undone. For a page URL, you can process not only the markup but also all visible text on another page; matches are shown with a section of surrounding text.

promoTwenty years of notes on websitesHow we did it in 2008 and what still works today.Open

What to edit and how

These settings apply to the field below and to page checks by URL. Everything is recalculated immediately; there is no Apply button.

Input

In HTML mode, only text nodes are edited: tags, attribute values, existing entities, and the contents of script, style, pre, code, and textarea pass through unchanged. In Markdown, blocks in triple backticks, inline code, URLs in link parentheses, link definitions, and the table separator line remain untouched.

Text language

The language is detected by the share of Cyrillic characters; German is also detected by its unique letters. The language determines the default quotation marks and whether short words are attached: in English and German text, prepositions are not attached to the following word.

Rules to apply

“Use ё” is disabled by default: many publications deliberately do not use ё. The dictionary is limited to forms whose spelling with е is not a word at all.

Output format

Entities are needed for markup: you cannot copy a nonbreaking space by sight from the rendered text, but you can see  . In HTML and Markdown modes, entities are inserted only in visible text; inside script and style, the browser does not decode them, so the characters remain unchanged.

Show the word lists used by the rules Hide word lists
  • Attach to the next word:
  • Attach to the previous word:
  • Do not break before a number:
  • ё dictionary:

Source and result

The inserted text is on the left, and the result is on the right. The panels scroll together.

Up to 200,000 characters, or about three author’s sheets. Editing happens on your device, and the text is never sent anywhere.

The file is read in your browser and never sent to the server. The parser switches automatically for .md and .html files.

“Apply to source” puts the finished text back into the field on the left. Continue editing manually without moving text between panels.

Result

What to show

Done

Input characters
Output characters
Quotation marks replaced
Dashes added
Nonbreaking spaces
Characters and abbreviations
Extra spaces removed

    The text is edited on your device and never sent anywhere. Copying and downloading use the actual string, not the version where nonbreaking spaces are shown as dots. Only the URL in the block below is sent to the server, and only when you click the button.

    Typography of a third-party page by URL

    The quick run processes the markup visible in search results and social media. The full run processes all the text people read on the page.

    What to fetch from the page

    Markup includes the title, description, og:title, og:description, and H1–H6 headings: a dozen lines that appear in search results and link previews. All visible text is what people read: the server removes scripts, styles, and hidden content, then returns everything else in full, including the menu, labels, and footer. The rules, language, and quotation mark pair for both passes come from the settings above; when you change them, the analysis recalculates automatically without fetching the page again.

    Our server will fetch the page. The typographer then runs it through the enabled rules and shows where straight quotes, hyphens instead of dashes, and missing nonbreaking spaces occur. The URL is never stored. The limit is 300 requests per hour from one address.

    URL not checked

      What the typographer found on the page
      Location Current Suggested Fixes

      The table displays a nonbreaking space as a dot so it is visible. The CSV, downloaded file, and fixes field contain the actual character. After a markup pass, “Transfer to the fixes field” puts the found strings into the source; after a text pass, it puts the entire page text there. The table shows the first 200 locations; the CSV includes them all.

      Bookmarklet: edit text directly in someone else’s CMS

      To avoid moving text from the admin panel here and back.

      Drag the link to your bookmarks bar

      Typographize this field

      Then, in any admin panel, place the cursor in a text field and click the bookmark. The text in that field will be typographed in place. The bookmarklet uses a reduced rule set: the selected quotation mark pair, em and en dashes, ellipses, extra spaces, and nonbreaking spaces after short words, after numbers, and before punctuation marks. The link is rebuilt for your selected quotation marks, so configure them above first.

      bookmarklet URL javascript:

      If dragging does not work, create a bookmark manually and paste this string into the address field. The bookmarklet does not send anything anywhere: it uses the same code as this page, only in a reduced form.

      promoCalculate ROI at the same timeCampaign payback based on spend and revenue.Open

      How to use it

      1. Choose the input type. Plain text is edited in full. In HTML mode, the typographer parses the markup and touches only text nodes: tags, attribute values, existing entities, and the contents of script, style, pre, code, and textarea remain unchanged. In Markdown, fenced code blocks, inline code, URLs in link parentheses, and the table separator line pass through untouched.

      2. Paste text, upload a file, or enter a page URL in the lower block. Editing starts immediately; there is no "Count" button.

      3. In the URL check block, choose what to fetch. "Markup" is for checking the title, description, og data, and headings—in other words, the lines used in search and social media. "All visible text" is for processing the entire page: findings are then shown as text snippets around each edit, and the finished text can be fetched with a button or sent to the editing field.

      4. Switch to "Changes". Each edit is marked, and the rule and previous version are visible under the cursor. If a rule fired in the wrong place, click the marker to undo that edit and recalculate the counters. Clicking the underlined location restores the edit.

      5. Choose the output format. Layout developers need entities: you cannot distinguish a non-breaking space from a regular one by eye in finished text, while   is visible. Each of the three formats has copy buttons, and you can also download the result as a file.

      6. "Apply to source" puts the result back into the left field, so you can continue editing it manually without moving text between panels. The bookmarklet in the last block edits a field directly in a third-party admin panel.

      promoBrowser task listNo account required—everything is stored on your device.Open

      The formula and what it includes

      "quotes" → «guillemets» · word - word → word — word · 5-7 → 5–7 · 10 kg → 10 kg with a non-breaking space · ... → …

      A non-breaking space is a separate character with code 160, not a regular space with a special marker. That is why it survives copying: the character itself goes into the clipboard. In HTML, it is written as  —that is what the entity output mode is for.

      Example walkthrough: the line about the market

      The input data is the same as the default field values: you can calculate it mentally and confirm that the tool is telling the truth.

      1. Extra spaces: there are none here, so the counter stays at zero.

      2. Punctuation: the three dots at the end collapse into a single ellipsis. One edit; the line becomes two characters shorter.

      3. Quotes: the first follows a space and becomes an opening guillemet; the second becomes a closing guillemet. Two edits.

      4. Dashes: the hyphen between spaces becomes an em dash; the hyphen between 5 and 7 becomes an en dash without spaces. Two edits.

      5. Non-breaking spaces: after «и» inside quotes, according to the conjunction list; before the em dash; before the percent sign; after «и» and after «не» at the end. Five in total.

      Output: ООО «Рога и копыта» — это 5–7 % рынка и не более того… In entity mode, the same line looks like ООО «Рога и копыта» — это 5–7 % рынка и не более того…—which is the convenient form to put in a template.

      Frequently asked questions

      promoAll toolsForty-four tools, all running in your browser.Open

      Related tools

      3