Jump to content

How can I add small annotation-like text (superscript)?

Go to solution Solved by paul2009,

Recommended Posts

  • Solution

There isn't a preset available for this in the text editor, so you'll need to add your text in a Markdown Block or a Code Block and use HTML. The HTML for superscript is

<sup>   </sup>
For example, you could add something like this:
<p>This text contains <sup>superscript</sup> text.</p>
..to achieve this..

This text contains superscript text.


Read more about the HTML here: https://www.w3schools.com/tags/tag_sup.asp

I hope that helps.

Paul

Contributors to this forum voluntarily give their time to help you.
If a post helped, please tap on one of the "Like" icons below  ↘️

Edited by paul2009

About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

Link to comment
  • 6 months later...

Paul's answer works well. In addition, if it's something you use often and require the style to be in-line with the rest of your text, I've created a plugin for Squarespace that allows for superscript, subscript and more. See Squint.

-Brandon
Project Mgr. and Developer at Ignertia
Creator of Squint - Custom Text Styles & Headings for the Squarespace Text Editor


Edited by brandon
Initial Revision

If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' vote.jpg.c260784ece77aec852b0e3049c77a607.jpg (top-left)

Link to comment
  • 3 years later...

I do it like so … (for digits)

  1. I select the digit that I would like to superscript
  2. In MacOS, I launch the Character Viewer
  3. I use the search function available in the Character Viewer window and search for superscript
  4. From the search results, I double click the character I want to replace the selection I made in step 1 and the selected text is now replaced by what I double clicked on

As a tip, you can pretty much double click on most anything inside the character viewer and it will "type" into the text block. I might be worth your while to inspect the element using the browser inspector to learn what is going on behind the scenes as it were. I would also test the results by viewing the contents in a variety of browsers to understand any limitations that might not be obvious.

image.thumb.png.94a3cadebf8cf8b143ebbbee7591eb07.png

Edited by AlexSantos
Added tip
Link to comment
  • 2 months later...

There are Unicode superscript characters.

Superscript: ᴬᴮᶜᴰᴱᶠᴳᴴᴵᴶᴷᴸᴹᴺᴼᴾᵠᴿˢᵀᵁⱽᵠˣʸᶻᵃᵇᶜᵈᵉᶠᵍʰᶦʲᵏˡᵐⁿᵒᵖᵠʳˢᵗᵘᵛᵠˣʸᶻ¹²³⁴⁵⁶⁷⁸⁹⁰

Subscript: ₐBCDₑFGₕᵢⱼₖₗₘₙₒₚQᵣₛₜᵤᵥQₓYZₐᵦ𝒸𝒹ₑ𝒻𝓰ₕᵢⱼₖₗₘₙₒₚᵩᵣₛₜᵤᵥᵩₓᵧ𝓏₁₂₃₄₅₆₇₈₉₀

You can copy these characters and paste them.

 

Link to comment
  • 1 year later...
  • 1 year later...
On 5/28/2021 at 12:33 AM, ethanchan145 said:

There are Unicode superscript characters.

Superscript: ᴬᴮᶜᴰᴱᶠᴳᴴᴵᴶᴷᴸᴹᴺᴼᴾᵠᴿˢᵀᵁⱽᵠˣʸᶻᵃᵇᶜᵈᵉᶠᵍʰᶦʲᵏˡᵐⁿᵒᵖᵠʳˢᵗᵘᵛᵠˣʸᶻ¹²³⁴⁵⁶⁷⁸⁹⁰

Subscript: ₐBCDₑFGₕᵢⱼₖₗₘₙₒₚQᵣₛₜᵤᵥQₓYZₐᵦ𝒸𝒹ₑ𝒻𝓰ₕᵢⱼₖₗₘₙₒₚᵩᵣₛₜᵤᵥᵩₓᵧ𝓏₁₂₃₄₅₆₇₈₉₀

You can copy these characters and paste them.

 

When I use the Character Viewer or copy and paste these characters, 123 are one size and 456789 are smaller. 

image.png.782120e0d2bb3e4aa4a40f6c67c46b9e.png

I have 107 citations in my blog (a university essay). Any idea how to get superscripts that are the same size? 

Thanks, 
Sarah 

Edited by sarahhoey
Add screenshot
Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.