How to make open (left) curly quote marks work?

Design help Layout & Design
1

When I type text in an RTF, Text, Paragraph, or Header block and want to put something in quotes, the first quote is a right, closing quote mark, so it looks like this:

image

I have to go grab the character from somewhere else and paste it in.

Is there a fix for this?

2

Hi @enteleos you can create your quotes easy way with span element and you can customise it as you need.

To create span you need some text (any text) .

  1. select text to activate submenu to create span

Step_1

  1. Add some class name to your span. I have chosed name quotes but it can be anything meaningful to you.

Step_2
Step_21566×357 52.5 KB

  1. create style to add entity before and after

Step_3
Step_31573×945 108 KB

If you do not know HTML entities codes here is link that you can add to your bookmarks. :wink:

now any time you wrap any text block in span and give it name eg. quotes your text wrapped in span will be wrapped in quotes.

Hope you got an idea how to* and hopefully solved your request :wink:

3

Thank you Stan! Looks like an interesting solution. I have a question or two though, and I hope you’ll be able to clarify.

  1. It looks like I would need to embed the style on any page in which I used quotes. Is that the case?
  2. If I needed quotes in a headline and another set in text, for example, would I need to create two styles? Or would it work fine to only include the content: line and it would adapt to its context?
  3. Would I be able to do the above bare-bones style definition by adding it to the site’s custom code section and it would work on any page?
  4. Is this a bug with Webflow, that smart quotes just don’t work in the editor?

I can see how your solution gives lots of great options for a high-end design, but my site is pretty simple, design-wise, and I really just want quotes to work easily in my text as I create my content. I appreciate your input and am hoping we can figure out a way to make this as straightforward as possible. Doing a span with a quotes class and adding the style to custom code would be a good-enough solution for now.

4

hi @enteleos

  1. when you place style to your site setting in custom code tab it should work in any page as it will be set globally.

  2. As you can see in example there is set 4em for quote size. So you can create several classes as you do for any other elements like quote-32 quote-16 quote-12 quote-red quote-fancy etc. and assign appropriate class to text span on type and/or viewport size. Changing size can be done programatically but this will be overkill for task like this or simple adjust quote size for viewports with custom media-queries.

  3. Do not get this but I thing is very similar Q as in point 1 (code in site setting)?

  4. Not it is not a bug. It is the way what Webflow offer. Mean WF GUI offer only very basic tools to work with and even some of these tools are way behind what CSS offer these days. Thats totally fine as CSS is moving forward so fast. So without custom code is WF imo toothless toy. Nothin wrong about that as is still great for fast prototyping (with help of custom code).

5

OK, just trying this out, in case it’s helpful to others. Some answers to my questions, with more questions.

  • I can limit the style to the content: line only and it works on any type of text/head/RTF block.
  • If I place the style definition in the custom code head section, it works on the live site. However, the quotes do NOT show up in the editor or the preview.
  • If I insert the style into the page itself as an HTML embed, it works in all areas.

For me, it seems more practical to just learn the Windows Alt+Num key combinations for the smart quotes (Alt+0145 through 0148). Not sure the equivalent on a Mac.

At least we’ve got a workaround, though, for people who are more skilled at this stuff than I am. Thank you, Stan! (And thank you for your perspective, too, on where Webflow is relative to the fast-moving train of CSS, etc. I’m grateful my project can do well enough with these basic tools most of the time.)

1 Like