Undocumented Medium Formatting Tricks
Medium.com is great for anyone that writes. They’ve simplified the once tedious chore of self-publishing formatted content online and have done so on a platform that helps increase exposure.
Note: This article is intended to extend Medium’s Help section, not to duplicate it. Go have a look there too.
Index ☍
Introduction
Defaults
Undocumented Tricks
Other People’s Tutorials
Introduction ☍
[Index]
To keep things simple, Medium only provides limited formatting options that work for the vast majority of people who use the platform. This creates a uniform appearance which results in a polished look for everyone.
But the developers of Medium have also created a platform and editor that is capable of accepting additional non-standard formatting not directly provided for in the editor’s pop-up formatting tools. With some extra diligence, it is possible to enhance the formatting of user published content.
Defaults ☍
[Index]
Medium’s pop-up formatting tools provide the following options by default:
- Bold [⌘ + B / Ctrl + B]
- Italics [⌘ + I / Ctrl + I]
- Links [⌘ + K / Ctrl + K]
- Headers [⌘ + Alt + 1 / Ctrl + Alt + 1]
- Sub-Headers [⌘ + Alt + 2 / Ctrl + Alt + 2]
- Indented Quotes & Pull-out Quotes [⌘ + Alt + 5 / Ctrl + Alt + 5]
The last icon on the tool bar that looks like a speech bubble with a pad-lock is for Private Notes which you can learn more about in the Help Center.
Undocumented Tricks ☍
[Index]
The platform and editor built for Medium is capable of greater expression than what is available through the options provided in its pop-up formatting tools and keyboard shortcuts. Medium inserts name and id attributes into its HTML with unique identifiers and also supports most Unicode text. These are what enable the undocumented tricks detailed here.
Why uniquely identified id attributes are useful ☍
As you write your draft, Medium’s editor dynamically creates the HTML to properly render it. To Medium’s credit, every new paragraph created when you hit the Enter key is assigned an HTML name attribute with a unique alpha-numeric identifier. The name attribute in this <p> paragraph block was assigned as “07d1”.
Once published, a matching “07d1” id attribute will be assigned as well. That means every paragraph on Medium can be linked to directly using Internal Hyperlinks (aka “Permalinks”, aka “anchors”, aka “bookmarks”, aka “Fragment identifiers”).
If you are willing to invest a little extra effort, everything on Medium can be made directly navigable with Internal Hyperlinks. You can jump around within your own published documents (as has been demonstrated throughout this tutorial), or you can jump to a particular paragraph published by someone else on Medium.
A bit about Unicode ☍
Unicode is a computing industry standard for the consistent encoding, representation, and handling of text expressed in most of the world’s writing systems. — Wikipedia
Simply put, Unicode provides for many more characters than are available by simply typing them on your computer keyboard. Unicode characters can appear different without help from HTML or CSS transformations, and technically speaking, Unicode characters that appear different, are different because their encodings differ. While your eye may perceive “A” and “𝖠” to be the same letter, your computer sees the first as “Unicode Character ‘LATIN CAPITAL LETTER A’ (U+0041)” and the second as “Unicode Character ‘MATHEMATICAL SANS-SERIF CAPITAL A’ (U+1D5A0)”.
The Medium platform and editor use UTF-8 character encoding. UTF-8 is the default character encoding standard expected for modern HTML5 compliant documents.
Use extended Unicode characters sparsely and with caution. While there can be visual benefits, there are also drawbacks and limitations.
Use of extended characters may negatively impact search engine results. Remember, to a computer Unicode characters are unique. A search for “Undocumented Medium Formatting Tricks” (unmodified) may not work if you use extended Unicode characters to render the appearance as “🅄🄽🄳🄾🄲🅄🄼🄴🄽🅃🄴🄳 🄼🄴🄳🄸🅄🄼 🄵🄾🅁🄼🄰🅃🅃🄸🄽🄶 🅃🅁🄸🄲🄺🅂” (modified). Compare how drastically different the search results are in Google by clicking on the link in the unmodified and modified versions above.
Support for Unicode can differ between browsers and other applications. While you can generally expect it to render correctly, just because it renders correctly on your application(s), do not assume that it will render correctly on all of your reader’s applications.
While reference charts and tables exist that display the Unicode character set, Unicode generators are typically more practical. I have linked to a few generators here, but don’t let that stop you from searching for others.
Tricks: ☍
Internal Hyperlinks & Permalinks (☍)
Strikethrough
Superscript & Subscript
Unicode Font Variants
Whitespace
Internal Hyperlinks & Permalinks (☍)
As you may have noticed already if you’ve tried skipping around in this tutorial using the provided Internal Hyperlinks, their performance on Medium can be inconsistent. Sometimes the page does not scroll all the way to the correct section, and sometimes it jumps back to the top of the page for no reason. Despite these glitches, most times it works as expected and in my opinion, the benefits outweigh the drawback of Medium’s glitchy page scrolling. Perhaps if more people begin using Internal Hyperlinks in their Medium documents, Medium’s staff may decide to troubleshoot and eliminate the page-scroll glitches so it operates as expected. (Hint. Hint. Nudge. Nudge. Wink. Wink. I’m looking at you Medium Engineers.)
Sometimes as a reader, you want to be able to quickly skip directly to the part of a document that is relevant or of interest to you. Particularly when a document is long. Sometimes as a writer you want to properly cite your sources with a formal bibliography¹, or expand on individual thoughts in footnotes² without breaking the flow of what you are writing. The Web has long had that form of expression built into it by using Internal Hyperlinks that allow readers to skip around within documents as they please following inter-document links provided by the author. Individual sections can also be assigned direct Permalinks (☍) so readers can direct others to specific content without forcing people to read the entire document.
Medium has the bare essentials for incorporating Internal Hyperlinks built into their platform and editor, but they do not provide any direct access in their pop-up formatting tools or keyboard shortcuts.
With HTML, the method to accomplish this is to give sections of interest a unique identifier using the id attribute. Once this is done, all that is necessary is to link to the section of interest by creating a link to the id using a hash #. If the id looks like id="Section14" then the link would be #Section14. As you write in the Medium editor, it automatically generates unique alpha-numeric identifiers. If you view the source for the section of interest, it will look something like this.
While editing, Medium automatically creates name attributes for each <p> paragraph block with unique alpha-numeric identifiers. Upon publishing, matching id attributes are created. If you view the source of the preceding paragraph, it will look something like the example above but with matching name and id attributes as seen below.
The name and id attributes will always match as is required by the HTML5 specification. So the paragraph section of interest can always be reliably linked to with #2b1b like this. You can add or change content above, below, or within a paragraph section on Medium and the editor will not change that section’s unique identifier. Only deletion of an entire paragraph section will remove the unique identifier.
Lets create a step-by-step Permalink to the main Index section of this tutorial.
Begin by marking it as a Permalink using the standardized diagonal-chain links Unicode glyph (called “Opposition”): ☍
1. Highlight the relevant section text of “Index ☍”. In Firefox you right-click to View Selection Source, in Chrome you right-click to Inspect, and in Microsoft Edge its time you start using Firefox or Chrome.
2. Once in source-view, locate the value of the name attribute. In this example, the value is “3bd4”. Highlight and copy the name attribute’s value (3bd4) into your clipboard.
3. Finally, create a link in the desired location. In this case the ☍ glyph by highlighting it to activate Medium’s pop-up formatting tool where upon selecting the link creation tool, type a hash # and paste in the 3bd4 from the clipboard. It will read #3bd4 as seen in the example image. Hit Enter and voilà, you have an Internal Hyperlink on Medium.
Strikethrough ☍
Strikethrough text is a useful method to mark text as having been removed or replaced in a transparent way. Text remains legible, but is considered to be deprecated. It is a method commonly used in law and academia, but is a good practice for anyone wishing to be as transparent as possible about revisions made after publishing.
̶T̶h̶i̶s̶ ̶i̶s̶ ̶w̶h̶a̶t̶ ̶s̶t̶r̶i̶k̶e̶t̶h̶r̶o̶u̶g̶h̶ ̶t̶e̶x̶t̶ ̶l̶o̶o̶k̶s̶ ̶l̶i̶k̶e̶.̶
To get strikethrough text on Medium, we rely on extended Unicode. The simplest method is to use an online generator like this Strikethrough text generator and just copy and paste into the Medium editor. You can also search for another strikethrough text generator if you don’t like the one suggested above.
Superscript & Subscript ☍
The set of alpha-numeric Unicode characters available for Superscript and Subscript is incomplete. Unicode is an evolving standard and proposals exist to extend the available characters to include those missing.
Composing words is not recommended. Suggested use would be as bibliographical links¹, footnotes², or mathematical notations. Below are the available characters. You may copy and paste from below or use a unicode superscript generator such as Tiny Text Generator.
Superscript: ⁰¹²³⁴⁵⁶⁷⁸⁹⁺⁻⁼⁽⁾ᴬᴮᴰᴱᴳᴴᴵᴶᴷᴸᴹᴺᴼᴾᴿᵀᵁⱽᵂᵃᵇᶜᵈᵉᶠᵍʰⁱʲᵏˡᵐⁿᵒᵖʳˢᵗᵘᵛʷˣʸᶻ
Subscript: ₀₁₂₃₄₅₆₇₈₉₊₋₌₍₎ₐₑₕᵢⱼₖₗₘₙₒₚᵣₛₜᵤᵥₓ
Unicode Font Variants ☍
The Medium staff have put a ton of work into the platform’s typography. For Headings and Pull-out Quotes, Medium uses the sans-serif Kievit font in Regular, Bold, and Slab Italic. For the Body, Medium uses the serif Charter font in Regular, Italic, Bold, and Bold Italic. You can read about their efforts to revamp everything in 2015 in Project: TNT (The New Typography). Kievit Bold alone has 1,106 glyphs available. You can view a graphical chart of the Cast of characters.
You should absolutely use Medium’s default typography so your documents are legible, printable, searchable, and compatible across devices. If you use any Unicode font variants, things may not work as expected, may not display, or may look crazy.
Ȃ̴͈͎̑̐̀̂̋̓̿́̊̄͐͆̂̃̓̃̽͋̆̄̄̂̀͂̏͆̚͜͠n̶̛̛͎̗͉̞̞͓̔̐̄̄̌̽̎̀͗̈́̇͗͊̽̊̆̾̉̏̈͌̉̐̄̅̓͒̂̑̍̒̀̿̂̈́͗͂̐́̂̋̋͂͊̑̀̅̆̉̂̔́̓͌̀̕͘͘̕͘͠͝͠͠͝d̶̛̺͉͍̣͈͙̰̦̞̟̘̘̹̗̻͓̼̞̗͎̟̙̫̝̻͓̅̿̑̐͋̑̉́͂̇̒͒̄̔̾̏͑͐̔́̓͗̔̄͊͌̀̌́̏̃͑̿̅͆̊͑̈́̑͂̿̎̅͝͠͝͠͝ Ȉ̷̧͉̽̆ d̶̢̧̡̡̧̧̧̜̰̞̠͉͉̟͔͓͚̠̻̠͖̮̭͔͕͓̬̯͖̖̼̞̪͎̜̟̠̺̤̮͖̯͈͓̟͎͎́̽̃̌͆̕̚ͅͅo̶̩͕̣̪̟͖͔̲͙͉͖̳̠͍͔̖͎̟̜̺̱̻̭̱̦͖͖͈̩̗̾̈͒̾̋̈́̈́͋̍͒̇̏̿͒͛͋̎͗̈́̊̀̈́͗̇̋͛̍́̀̒̅̉̈́̏̃̅͂̾́͐͗̊̈͊̓͌̀̇̀̇̋̕̚͜͝͠ m̴̢̧̧̨̨̡̨̛̛̻̳̱̯̣̺̰͔̭̦͔̜̳̰͈̫̭͔̰͓̫̰̲͉̜͉̘̬̱͎͍̦͇̮̱͓̖̹̟̤͓͓̜͙̦̬͉̭̖͚̪͕̪̗͔̘̱̦̫͚̹͖̬͈̳̩͙̤̱͙̟̝͎̜̲̟͓͎͚͇̹̊̄̐͑̾͊͛͂͂̆͐̍͛̂̀̉̈́̀̉͌̔̽̔͛̿̈̅͆̿̀̈́̂͗̋̅́͛̇̍̅̄͂̊̋̏̆̒͐̃̈́͋́̐̈̇̏͗̆͑̂͋̓̒̾̇̋͗̎̔̑͌̊́̀̇͑͋͘̚͘͘͘͝͠͝͠͠ͅͅͅe̷̡̢̡̢̛̛̛̛͓̜͈̹̫̳̞͎̺̬͉̘͚̥̩̥̺̺̤̠̖̥̼̬͙͔̹̖̙̟̮̻̟̟̤̤̳̍̎̎̎̂̊̀̃̀̓̓̄͗́̃͒̾̽̍̏́̐̉̈͗̐̈́̂̋͒̈̐̄̐̉̀̈́̏̀̈́̔̌̅̋̊̓͛̊̎͆̅̐̋̎̈̽̎͋́̄͐̈́͒͊̈́̅̆̈́̓̔̇̉̂̉̒̈̿̒̈́́͛̋͒̅͋͂̓̿́̿̇̕̚̚͘̚̕͘͘̕̚̚͜͜͝͝͝͝͠͠͝͠͝ͅa̴̡̨̧̧̢̧̢̨̨̧͖͈͎̯͙̠̯͍̼͖̪̜̬̙̖͈̯͓̭͎̼̦̖̳͈̬̻̙͖̠̦̟̠̦̣͉̼̤͔͓̠̫̱̘̲͇̹̖͔̦͙̠̟̥͓̭̥͖̲̭̳͓̠̰̝̖̪̗̙̤̻̩̼̺̩̟̰͔̗̝͔͕̠̯̘̪̺̪̮̺͚̘̜̪̟̗̺͓͖̽̈̏̀͂͊͑̋͌̃͒̀̽́̀̀͌̃̽̋̃̄̀̿̾͜͜͠͝͝ͅͅͅń̶̢̧̢̡̛̛̠̻̞̘͖͈̞̭͍̪̣̞̮̳̤̦͔̰̜͉̙̪̙̠͈͖̱̰̰̪̠̳̥͚̞͓͙̮̳̭̠̟͍͔͉̗̞̪͕̦͍͚͉̘͉̙̫̩̘͇̖͈̉́͒̏̊̈̍̂̒͆̌͋̑̈́͐̍̉̿͑́̄̎̔͊͌̍̈̓̊͗̑͌̍̏̃̉̇̓̃̓̿̿͌̔̋̒͐͐̈́͋͛́̈́̿̑̅͑̂͑̈́͊͌̔̈͂͆̌̃̌̅̅͂̒̈́̎̏̽̃̾̂͋̄̍̏̐̾͗̽̓͌̇̎̏̀͑̓͌͌̊̆̒̓̌͛͋̍̓̒̊̂̋͐̎̂̕̕̚̚̚̚͘͜͜͠͝͝͠͝͝͠͝ c̴̡̡̧̡̢̨̨̢̨̢̡̢̨̡̨̛̪̥̣͚̺͕̞̻͔̙̮̜͕͖̝̭̗̣̻͔̖͉̫̮͎̗̗̱̼̝̜̜͉̩̟̼̭̣͔̩̺͚̟͙̟͇̞̰̹͎̝̗͖̥̱͕͔͉̞̳̠̺̻͚̳͕̘͓͓̹̼̟̫̯̯͚̘̳̺̭̫͖̯̦̝͕̭̗̻͚̹̰͈͓̯̤̣̘̺͉̜̰͙̫̞̫͚̥̫̦̻͚̯̏̆̎̍͛̅̿̈́͗͊̀̈́̽̏̄̋́̏̍̃͐̇͆̎̆̈́͊͆̈́̇̐̒̽̄́́̎̆̕͜͜ͅͅr̴̡̡̧̧̠͍̗̟̹͕̦̘͍̖̺̫̲͙̙̪̼̙͍̫͓͇͕̝̫̲̫͚̙̠̰̤̙̻̳̮̺̱̘̦̯̝̬͙̳͔̬̳̠̳̜̱̽̉̉̏̎̈̆͑̾͗̌̾̀͑͋́͊̀͌̚̚͜͜͜͜͜͜ͅͅͅą̸̧̨̢̢̛̛̥̹͎̟̝̤̻̭̝̭̩̺̮͕̹̞͍̠͖̲̟̙͍͍̰͎̹͎̬̹̪̖̤̥̯̩̜̥̬̗̖͚̘̣͖̫͚̳͉̞̼͉̱̲̜̲̲̮̟̺̘͇̃̍̿̅̉̐̏̈́̀̈́̔͊̊̂̑͂̍̆͗́̐̈́̔̆͋͑̔̍͂̈́̍͐̃͌̾̏̓̌͆̅̾̏͛̈́̓̍́͋̐̆̿͂̔̎̃̓̿͋͒̕̚̕͘͘͜͝͝͝z̵̨̡̡̧̧̢̧̡̢̨̧̡̡̢̨̡̢̢̡̛̛̼̤̝̫̲͕̗̥̰̗͉̮̭̹͉͓͇̠̘̖̯̞̲̣̪̻͎̙̯̖̳͖͍̭̥̲̱̭͈̱̜̥̺̗͖̦̟͇̼͚̥̹̣̭̣͙̝̠̮͉͉̠̜͚̗̜̪̲̜̰̳̣͙̖̜͔͈̙̲̜͚͔͈̰̯̫̗̪̹̳̬̘̘̝̲͙͚͖͈̻͇̬̗̮̹̞̜͎̩͎͎̫̖̻̩̻̤̫̮̼͍̳̫̪̭͔̺̬̮͈͔͓̼̘̫̮̘̤̞͕͍̱͚͙͍̃̈̐̆̍͂̈́̈́͆͑̌͐́̑̾̑̊̍͋̃̌͆́̑̈́̓̐͑̈́̃̃̏̂́̀̌͌̿̈́̊̅͆͂͋̏̿̃͛̆͒͊̌͐̋̃̆̑͋̉̑͒͗͌́͌̄͑́̐͋͛͌̀͑̀͂͑̔̃̎̈͆̈́̈́̅͂͗̏̓͊̓̈̉͐̈́̌́͐̍̐͊̈́̃͑̋́̇͋̌́͆́͂̈̔̿́͂̑̑̐̌̇̈́̋͒̄̾̿̉̀́̃͐͛̾̌̄̂̒̅̇͗͛͛̄̌̈́͋͑̋̀̒̚͘͘̚͘̕̕̚͘̕̕͘͜͜͜͜͠͝͠͝͝͝͝͝͝͝͠͠ͅͅͅͅͅẙ̸̛̛̘̪̜͍͇̦̖̭̫̝̙̓̃͆͌̏̀̈́̊̀̍́̈́̊̋̑͐̒̒̏̈́̈́̈́̆͗͒̇̊͗͑͊̂̅̔̓̃́͊̋͗͗͛͌́͌̌̾̿̽̀̈́̔̎̿͐̊̂͛̌̇̈́̋̇͐̊͐̋̎̐̽̈́̚̚͘͘̕̚̚̕̚̚̕͜͠͠͝͠͠ͅ.̸̡̧̧̨̧̛̛̹͕̥̮̫͉̬͖̤̮̯̬̯͍̳̖̗͉͙̗̱̩̱̫̟͙̼̉̎̋̑̇̀̈̀̀̓̓̄̆̔̈́̄͊̄̈̌͒͛̄̿̋̆̑̃͊̎̉͐̓̿̈̋̽̿̅͒̃̈́̔̅̀̈́̆̍̅͊̊̓̈̆̉̓͛̑̉̈́̈́̀̌̊̾͆͊̅̐̈́̓̇̈͂̍̆̈́̋͋̓͌̂̑̽̅͐̇̈́̏̄͛̈́͌͂͐̎̀̈́̋̀̌̀͌̏̓́́̈́̈̈̒́̔̅̊̋̈́̓̀̇́̿̏̄̈̓̑̆̍͊̎͒̈́̊̂́͂̿͆͐͂̐̌̒̈̀̃͊̐͗̐͊̚̚̕͜͜͠͝͠͠͠͝͝͠͝͝
This is a job for a Unicode Text Converter where you can type out what you want, and then select the font variant you desire.
As you can see to the left there are some interesting options. These are some of the more attractive choices. They may not always appear as they do in the graphic.
I have already demonstrated 𝖬𝖺𝗍𝗁 𝗌𝖺𝗇𝗌 and 🅂🅀🅄🄰🅁🄴🄳 in the about Unicode section of this tutorial.
𝓨𝓸𝓾 𝓬𝓪𝓷 𝓮𝔁𝓹𝓮𝓻𝓲𝓶𝓮𝓷𝓽 𝔀𝓲𝓽𝓱 𝓽𝓱𝓮𝓶 𝓯𝓸𝓻 𝔂𝓸𝓾𝓻𝓼𝓮𝓵𝓯. 𝓙𝓾𝓼𝓽 𝓭𝓸𝓷’𝓽 𝓫𝓮 𝓼𝓾𝓻𝓹𝓻𝓲𝓼𝓮𝓭 𝓲𝓯 𝔂𝓸𝓾𝓻 𝓻𝓮𝓪𝓭𝓮𝓻𝓼 𝓪𝓻𝓮 𝓪𝓷𝓷𝓸𝔂𝓮𝓭 𝓫𝔂 𝓲𝓽.
𝔸𝕣𝕖 𝕪𝕠𝕦 𝕒𝕟𝕟𝕠𝕪𝕖𝕕 𝕪𝕖𝕥?
Ⓗⓞⓦ ⓐⓑⓞⓤⓣ ⓝⓞⓦ? 𝕿𝖍𝖎𝖘 𝖎𝖘 𝕸𝖊𝖉𝖎𝖚𝖒, 𝖓𝖔𝖙 𝖙𝖍𝖊 𝕹𝖊𝖜 𝖄𝖔𝖗𝖐 𝕿𝖎𝖒𝖊𝖘.
If you could read any of those examples you can see how drastic changing the typeface can be. If you couldn’t see it properly you can understand why this isn’t advisable.
Whitespace ☍
Note: Despite my best efforts, I was unable to find a way to add whitespace with any of the Unicode whitespace characters³. Please, if you have discovered any tricks for adding horizontal or vertical whitespace to Medium publications, share or link to your methods as a comment.
Other People’s Tutorials ☍
[Index]
Here are a few tutorials written by other people about how to incorporate non-standard content into Medium documents.
Math
Tyler Neylon found that writing equations properly on Medium presented some challenges. His solutions are presented here.
Grandfathered Tricks
Tony Aubé discovered how to continue using formatting options that were discontinued by Medium. He realized that these options are Grandfathered into Medium’s platform and figured out how to continue using them in new documents.
Warning: For advanced users only.
That’s it. Enjoy.
— Antyal
¹ Example of a bibliographical link. [Internal Hyperlinks][Superscript]
² Example of a footnote. [Internal Hyperlinks][Superscript]
³ Another reference page of Unicode whitespace characters. [Whitespace]
You can find Antyal Tennyson on Twitter under the handle @AntyalT.
