"Curly Quotes" Display Issue in Chrome

Explorer ,
May 29, 2019 May 29, 2019

Copy link to clipboard

Copied

We are using RoboHelp 2017 (with upgrades) and a Responsive HTML5 output and layout (Charcoal Grey). 

We just noticed that some help topics displayed in Chrome have text that is appearing with symbols instead of quotation marks - only when the quotes are "curly quotes". I strongly suspect that this issue occurred when text was copied from Word documents (though we do try to avoid doing that).  So the result is that the HTML5 cannot resolve the "curly quotes", but can of course resolve the text when the &quot. tag surrounds the text.  This issue does not occur in our old WebHelp format, or in IE 11. But now that application to which the help is attached is now available more in Chrome browsers, so we are correcting any Chrome issues we find.

Here's what this issue looks like (sorry if this example is small):

ChromeDisplay Issue1.jpg

Here's what the HTML is for the text.  You can see the quotation marks vs the &quot. tag.

ChromeDisplay Issue2.jpg

A related issue, which also puts in symbols in Chrome, is a word with an apostrophe followed by a space - such as users'

So, we need help with:

    1. Finding all occurrences of this issue with the "curly quotes", so we can resolve.  Any ideas on what to search for to find these instances, or a good way to search? Note that this help system is humongous (technical term!), so it would be very difficult to go page by page of the help. Not sure if searching a Word document output would find them. 
    2. Any "magical" way of somehow resolving this problem using RH 2017 features.  I don't know of any functionality that can do this, but maybe someone knows of something we can try.
    3. Any scripting that someone knows of, that would help.

I would really appreciate any ideas or experiences with this issue in Chrome and HTML5.  It is important that we resolve this for our beloved help system  We are a bit desperate here.

Thanks so much!

Susan Tabnik

TOPICS
HTML5 layout

Views

852

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct Answer

Adobe Community Professional , May 29, 2019 May 29, 2019
Click the icon next to Hide Advanced Features and it will read Find rather than Begins With. Paste in there.In replace paste in " because need to work a code level.Make sure you tick Find in Source Code.With Current Project selected, it should work through the whole project.Get it wrong and you can wreck things so do make sure you back up.I always recommend creating the backup as a zip file. That prevents you opening it accidentally and working on it before you realise it was the backup. Th...

Likes

translate

Translate

Translate
Adobe Community Professional ,
May 29, 2019 May 29, 2019

Copy link to clipboard

Copied

I set up a Word document with some curly quotes and pasted it into RoboHelp 2017. Then I added some text with quotes typed in RoboHelp. That gives the following which is what you have posted.

<p>“curly quotes”</p>

<p>&#160;</p>

<p>&quot;ordinary quotes&quot;</p>

Difference is they are fine in Chrome.

curlyquotes.png

RoboHelp's Find and Replace seems to find the two types of curly quotes (paste them in) and the replace is the same for both. There is a Replace All option. Do back up your project first though.


See www.grainge.org for free RoboHelp and Authoring information.

@petergrainge

Please use the blue Reply button at the top to help me help you. The black Reply link nests replies and they sort out of order.

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
May 29, 2019 May 29, 2019

Copy link to clipboard

Copied

Thanks, Peter!!  So, just to make sure I'm understanding..

I copy the "curly quote" - the actual quotation mark - and paste it in the Find and Replace window, in the Begins With field.

ChromeDisplayIssue_FindReplace.jpg

Are the other settings here OK?

If I want it to search to find it in all topics - or the find / replace - what do I select?  When I tried it just now, the Find seemed to only find it within the topic that I had open.  Maybe I should try closing out all topics, then try the Find.

After I back up - to use Find and Replace, for the Replace value, do I type in a quotation mark (not curly) from RH?

Thanks so much!

Susan

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
May 29, 2019 May 29, 2019

Copy link to clipboard

Copied

Click the icon next to Hide Advanced Features and it will read Find rather than Begins With. Paste in there.

In replace paste in &quot; because need to work a code level.

Make sure you tick Find in Source Code.

With Current Project selected, it should work through the whole project.

Get it wrong and you can wreck things so do make sure you back up.I always recommend creating the backup as a zip file. That prevents you opening it accidentally and working on it before you realise it was the backup. This way you always have a clean backup that can be used to create a new clean copy time after time.


See www.grainge.org for free RoboHelp and Authoring information.

@petergrainge

Please use the blue Reply button at the top to help me help you. The black Reply link nests replies and they sort out of order.

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
May 29, 2019 May 29, 2019

Copy link to clipboard

Copied

Great - I think I get it.  So it would look like this, correct?

ChromeDisplayIssue_Replace.jpg

Not sure if this would work with the apostrophe issue (users' ) too - though I could try.

Thanks again, Peter!

Susan

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
May 29, 2019 May 29, 2019

Copy link to clipboard

Copied

It is correct but if you have a backup, why worry? The backup will get you

out of trouble. ☺️

Peter Grainge

www.grainge.org

@petergrainge

Please use the blue Reply button at the top to help me help you. The black Reply link nests replies and they sort out of order.

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
May 29, 2019 May 29, 2019

Copy link to clipboard

Copied

Thanks for reminding me not to worry!!

I think I need to copy the begin and end quotation marks from the HTML, instead of the "curly quotes" shown in the design display .  Cause after I tried it on one topic only, I see this in the occurrence:

ChromeDisplayIssue_after.jpg

I probably need to run through it twice, for begin and end quotes.

I so appreciate your taking the time to help us out here!

Take care

Susan

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
May 29, 2019 May 29, 2019

Copy link to clipboard

Copied

Yes, once for beginning and end. Test and backup again after that.

Also, don't do the apostrophe space at code level.


See www.grainge.org for free RoboHelp and Authoring information.

@petergrainge

Please use the blue Reply button at the top to help me help you. The black Reply link nests replies and they sort out of order.

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jun 03, 2019 Jun 03, 2019

Copy link to clipboard

Copied

Just adding more here, in case it may be helpful to others.

Find and Replace works great, so I used it for several other places that caused Chrome to be unhappy.

  • Replaced slanted tic marks with straight tic marks. The slanted ones caused Chrome to display the symbols.  And this was all over the place in my project where apostrophes were showing up.  When I found these instances, I copied the slanted tic mark from the HTML and pasted it in the Find field.  Then found a straight tic mark (which displays correctly) from the HTML, and copied/pasted into Replace field.  Selected Find in Source Code checkbox.  Below you can hopefully see the difference in the slanted and straight - difficult to see in Design mode, but easier in HTML.  The trick is, though, to find it in your help output in Chrome, so you'll know where to look in the HTML mode for ones to copy.

SlantedTicMark.jpg

StraightTicMark.jpg

  • Replaced "em dash" (longer ones) with a hyphen (en dash?). The "em dash" also caused Chrome to be unhappy.

EmDash-FindReplace.jpg

Hope this is helpful.  We also found a few instances of  currency symbols, such as for Euro, and math symbols, such as for Sum.

By the way - we still don't know how these got in there!

Susan

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jun 03, 2019 Jun 03, 2019

Copy link to clipboard

Copied

Word automatically replaces straight quotes with smart (curly) quotes. Plus a number of other characters, maths symbols and formatting. Unfortunately I think it's a per user issue, so while you can turn them off for yourself, you can't guarantee what's on and off for anyone else.

Have a look at the Word settings under File > Options >Proofing > Autocorrect Options for the things that Word automatically changes.

I've got a Word macro I run to clean up my documents before importing (or copying, although I try not to do that as a lot of other crud gets through).

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jun 04, 2019 Jun 04, 2019

Copy link to clipboard

Copied

Thanks, Amebr.  We are aware of what we can do in Word related to these.  But we try not to import directly from Word because of all the additional codes that come in from Word.  And perhaps accidental codes for punctuation marks and symbols.  So we are more concerned with using what we can in RoboHelp..

But I certainly appreciate your input here.

Susan

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jun 04, 2019 Jun 04, 2019

Copy link to clipboard

Copied

Apologies, I saw all the discussion about Word and thought you were copying text regularly. And it's always hard to know what people know.

I feel your pain with getting Word content in. I got so over the cruft I created a bunch of Word macros to clean up a heap of things including curly quotes and en dashes before either importing or copying. It's not perfect, but better than not doing it. And my copy/paste process involves going via notepad. While I then need to reformat everything, it's better than the oddities that result from pasting direct.

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jun 05, 2019 Jun 05, 2019

Copy link to clipboard

Copied

It is always helpful to know how other help authors are working!  We never know when we could need to use various techniques.

I appreciate your sharing that here.

Susan

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Resources
RoboHelp Documentation