How can I use smart quotes in the Ghost editor?

Hello! :wave:

I’m a recent convert to Ghost and am working to migrate my old static site blog to a Ghost installation. I was surprised to find that my usual browser extensions that convert “straight quotes” to “smart quotes” are defeated by the Ghost WYSIWYG editor.

I was particularly surprised to find this because the editor correctly handles endashes and emdashes, but not smart quotes – so it clearly has some awareness of typography. Smart quotes, then, are a puzzling omission.

Since moving to a WYSIWYG-style post editor is a significant part of the reason I’m migrating, I’d really like to find a way to continue using smart quotes in my blog posts and especially in my fiction writing. Since the browser extensions don’t work, I’m at a bit of a loss here. My only options seem to be:

  • Tediously copy-paste curly quote symbols every time I need them;
  • Write in another editor and then paste into Ghost, which is exactly the workflow I’m migrating to avoid;
  • Type a four-digit altcode every time I open or close a quote – something that only works if I’m using a machine with a numpad, anyway.

Is it possible to configure the Ghost editor to accept smart quotes, or even to configure my own typographical replacements? Or, if anyone has browser extension recommendations that will play nice with the Ghost editor, I’d be up for that too.

2 Likes

There’s nothing specific for the editor, but if you’d like your theme/site to output particular quotes then this is quite easy to do with something like https://smartquotes.js.org

Hello!

Hope you don’t mind if I wake this topic.
I was just wondering if you found a workaround for typing smart quotes in the ghost editor.

I’m also puzzled about why this is not supported. From a typographic point of view, straight quotes should never be used in text composition.

I’m using ghost(pro), so I don’t have an option to use a library that would correct the quotes. I only noticed this recently, so I’ve been doing a lot of tedious searching and replacing lately. :sweat_smile:

It would be really great for users (and typography) if the ghost team could consider supporting typographic quotes like in other editors. Meanwhile, thank you for any tips!

3 Likes

https://smartquotes.js.org/ (or similar) is usable on any Ghost site, either via your theme or using code injection.

1 Like

I’m a photographer, a designer and a writer. I’m using a stock theme and don’t want to inject code to correct something that is initially wrong. Is there maybe a technical reason for resistance to not support typographic quotes in the ghost editor?

Ironically, this forum’s editor I am typing in right now, is supporting my apostrophes correctly and even “English quotes” when my keyboard is set to English and « French quotes » when it is set to French (on an iPad).

I’m not a programmer like apparently many here, just a normal user expecting what seems to be a normal behavior when typing text. I think this is an important topic for a tool aimed towards writers, don’t you think? What is your opinion? Thanks! :slightly_smiling_face:

2 Likes

I managed to set this up last night, with some help from the (excellent) customer service in Ghost (Pro). Will share their response here:

  • download your active theme first from within Ghost Admin, in the Settings > Themes area.
  • Once downloaded, unzip the theme, and include the smartquotes.js file (available for download here) and add it to your /asset/js/ folder.
  • Once added, you need to reference the fine within your theme’s default.hbs template using the asset helper, before the closing to reference the file, as well as initialize the script, like this:

<script src="{{asset "js/smartquotes.js"}}"></script>

<script>smartquotes();</script>

When you’ve finished editing your theme, and including the file, you can rezip the entire theme folder for upload back to your site for use.

I’m not a programmer either, so a tip that might save you some trouble: if you have a Mac, don’t use TextEdit to edit the file, because it garbles it. I used Atom.

If you follow the steps, smart quotes work fine. Though I was expecting them to change in the editor and actually they just change in the resulting post/preview :). Still, it’s the result that counts. Good luck.

1 Like

Hi @mkhalili

Thanks for taking the time to share your experience. Much appreciated.

Being on the starter Ghost(Pro) plan, I don’t have access to my theme and even if I did, I don’t agree to add code to fix something that is initially broken. Straight quotes haunt designers ever since computers exist. They belong to programmers or typewriters, but not to typography. Any designer old enough will remember how QuarkXpress was a typographic disaster when it launched.

My workaround for now is to publish from Ulysses, but it is not a perfect solution as words always remain to be written in the Ghost editor. My texts are also meant to be typeset and printed on paper, so they need to be written with fullest respect of typography rules which Ulysses does despite being a Markdown editor. Another proof that it is possible, btw.

I don’t understand the choice of Ghost developers other than privileging technical aspects over secular typographic rules. Currently, hundreds (thousands?) of ghost sites are being written with wrong typography. What should I tell my students?

As excellent customer service is (I agree), I don’t think it saves trouble to any customer that they advocate to install third-party scripts to fix something they could perfectly do upfront if they had the drive to. Seeing how staff has curtly replied to me here, it just doesn’t seem to be their priority. I feel sad.

2 Likes

Hello all,

I am still struggling with ghost not supporting correct typography, hence smart quotes and apostrophes.

Notion has just stepped up on this and I think it is time Ghost steps up too by supporting the very basic rules of typography.

This may not seem important for developers, but it is crucial for writers and designers. I am still manually search-replacing quotes and it is such a waste of time not to say slightly embarrassing.

Please consider this with a priority.

1 Like

@egoes the best place to share a feature suggestion is in the Ideas category, which allows other people to vote and comment on the idea.

Make sure you search first to see if a similar idea has already been shared :)

In both Safari and Chrome, there are settings to turn on smart quotes under Substitutions in the Edit menu. You have to be in a text edit box to see them.

I was doing smart quotes manually whenever I edited a story, and now they are automatically inserted.

3 Likes

ghost_dumb_quotes

Good idea @BruceInLouisville, thanks, but doesn’t work here and not in iOS either. I have also tried substitution software like aText or TextExpander and it’s not viable, because languages have specific rules. Ironically, this forum software « seems » to do the job, doesn’t it?

@Kym I don’t think one should vote on something that is upfront wrong and that needs to be fixed. It’s not an idea. Plus, the audience voting on this forum is not representative of all ghost users. Please schedule to fix this. I don’t understand the obstinacy to not see this problem.

The first post in this thread dates back to May 2020. We’ve been very patient writers. I think we deserve a gift: smart typography! :smiley: :pray: Thanks for listening.

1 Like

Well, I just started a new post, typed the word “isn’t” and the apostrophe was curly without my doing a manual insert.

I run my Ghost admin in a Wavebox window, which uses the Chromium browser. It has a Substitutions menu choice under Edit. I see the same menu choice in Chrome.

This is on a Mac. Not sure if that feature is Mac-specific or not.

1 Like

I’m happy it works for you. Albeit, the limitation is clearly in the ghost editor. Until now, they seem to be counting on substitution solutions on the client side (or third-party JavaScript for those managing their install) which is far from being a reliable solution. I’m a ghost pro user stuck with an editor that acts like a 1950s typewriter.

I feel bothered.

Holy monkey bars, Batman! This actually works — so simple! Thank you!

I agree. This should be handed natively by Ghost .

Requiring some 3rd party script to be manually embedded/configured is not a good enough solution

1 Like

Thank you for pointing this out! Such a quick fix!