6

Is there anyway to tell SharePoint not to add invisible whitespace characters at the end of numbered lists / bullet lists?

Environment: SharePoint Office 365 version 16.0.0.4508.

For some reason, I'm frequently encountering mysterious whitespace at the end of numbered lists in wiki pages. I'm trying to write technical instruction manuals but when users copy-and-paste strings from the numbered lists, the clipboard contains "extra" invisible characters. If I cursor through the page in edit mode, I see that the cursor is moving through the "extra" invisible characters but I can't seem to delete them.

With Chrome 46.0.2490.86m, if I select some text from a wiki bullet list, then copy the text, and then paste it into UltraEdit with an 1252 ANSI-Latin I encoded text file; 1 extraneous 0x3F character is added before and after my the pasted text, same result with Internet Explorer 11.0.9600.17959 (update 11.0.22 KB3078071).

I did some more testing with a Unicode encoding. The character added is U+200B; which is decimal 8023 and shows up in HTML source code as ὗ. Which according to 2 is "Unicode Character 'ZERO WIDTH SPACE' this character is intended for invisible word separation and for line break control; it has no width, but its presence between two characters does not prevent increased letter spacing in justification."

I used Chrome Developer Tools to inspect the actual HTML around the bullet list when editing. Look for "some text" in this chunk of HTML and you'll see it's preceded by mystery ? characters; in UltraEdit with 1252 encoding these ? have code values of hexadecimal 0x3F. It looks like

<div id="DeltaPlaceHolderMain"> <a id="mainContent" name="mainContent" tabindex="-1"></a> <span id="ctl00_PlaceHolderMain_wikiPageNameDisplay" style="display: none;"> TestSharePoint </span> <span id="ctl00_PlaceHolderMain_wikiPageNameEdit" style="display:none;"> <input name="ctl00$PlaceHolderMain$wikiPageNameEditTextBox" type="text" value="TestSharePoint" maxlength="255" id="ctl00_PlaceHolderMain_wikiPageNameEditTextBox" /> </span> <div style='display:none'><input type="submit" name="ctl00$PlaceHolderMain$btnWikiSave" value="Apply" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$PlaceHolderMain$btnWikiSave&quot;, &quot;&quot;, true, &quot;&quot;, &quot;&quot;, false, false))" id="ctl00_PlaceHolderMain_btnWikiSave" /></div><div style='display:none'><input type="submit" name="ctl00$PlaceHolderMain$btnWikiRevert" value="Revert" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$PlaceHolderMain$btnWikiRevert&quot;, &quot;&quot;, true, &quot;&quot;, &quot;&quot;, false, false))" id="ctl00_PlaceHolderMain_btnWikiRevert" /></div> <div id="ctl00_PlaceHolderMain_WikiField"> <span dir="none"><div class='ms-rtestate-field ms-rtefield' style='border: none; '><div id='ctl00_PlaceHolderMain_WikiField_ctl00_ctl00_TextField_inplacerte_label' style='display:none'>Rich text editor Wiki Content</div><div class=' ms-rteflags-2' id='ctl00_PlaceHolderMain_WikiField_ctl00_ctl00_TextField_inplacerte' style='min-height:420px' aria-labelledby='ctl00_PlaceHolderMain_WikiField_ctl00_ctl00_TextField_inplacerte_label' ><div class="ExternalClass74D556E76BE44061B81428308A1DBF14"><table id="ctl00_PlaceHolderMain_WikiField_ctl00_ctl00_TextField_inplacerte_layoutsTable" style="width&#58;100%;"><tbody><tr style="vertical-align&#58;top;"><td style="width&#58;100%;"><div class="ms-rte-layoutszone-outer" style="width&#58;100%;"><div class="ms-rte-layoutszone-inner-editable ms-rtestate-write" role="textbox" aria-autocomplete="both" aria-haspopup="true" aria-multiline="true"><ul><li><span style="line-height&#58;1.6;">?some text</span><span style="line-height&#58;1.6;">?</span><br></li><li><span style="line-height&#58;1.6;">more text</span><br></li><li><span style="line-height&#58;1.6;">even more text</span><br></li></ul></div></div></td></tr></tbody></table><span id="ctl00_PlaceHolderMain_WikiField_ctl00_ctl00_TextField_inplacerte_layoutsData" style="display&#58;none;">false,false,1</span></div></div><div style="clear:both;"></div></div> <span dir="ltr"> <input name="ctl00$PlaceHolderMain$WikiField$ctl00$ctl00$TextField_spSave" type="HIDDEN" id="ctl00_PlaceHolderMain_WikiField_ctl00_ctl00_TextField_spSave" /> </span> </span> </div> <div style='display:none' id='hidZone'></div> </div> </div> <div id="DeltaFormDigest">

I can reproduced this problem with a brand new wiki page... sample wiki with bullet

Googling about U+200B, I've found similar complaints about SharePoint but no answer https://stackoverflow.com/questions/24205193/javascript-remove-zero-width-space-unicode-8203-from-string.

Improve this question
3
  • I tried what you said. I am using SP O365 as well and I tried it with Wiki Pages and Publishing Pages. In edit mode I can copy my bulletin lists or numbered lists to the clipboard and no extra white space is copied. Also I cannot see any cursor moving over a extra white space. Can you try this on a complete new site collection and then create a new wiki page. maybe it is something else causing this. Commented Nov 10, 2015 at 21:06
  • @Sebastian I'm not sure how to create a new site collection. I don't think I have permissions because I'm not the SharePoint administrator. I tried creating a new wiki page with a bullet list and reproduced the problem. Commented Nov 13, 2015 at 15:37
  • Some trivia: the Microsoft Windows 10 calc.exe also introduces nonprintable characters. Start calc.exe, use mouse to key in a value. Right-click on HEX and select Copy. Paste into a .java file in Java Eclipse IDE version Photon and you'll also see the same nonprintable character problem. Commented Mar 22, 2019 at 19:43

4 Answers 4

Reset to default
5

The problem seems to be caused by using Chrome 46 to edit the SharePoint lists. If the page is created and maintained with IE 11, I'm not seeing the problem.

Once I found out the problem involves the &#8023 / U+200B Unicode character 'Zero Width Space'. Googling turned up some useful search results... https://stackoverflow.com/questions/24205193/javascript-remove-zero-width-space-unicode-8203-from-string.

This appears to be some kind of defect in Microsoft SharePoint's RichText field.

The only workaround I've found so far is to manually remove the character using this process:

  1. Use Chrome.
  2. Access the wiki page with 8203 / U+200B.
  3. Edit the wiki page.
  4. CTRL+F to search for the text afflicted with 8203 / U+200B.
  5. Press F2 to edit the text.
  6. While carefully preserving the "" (quotation marks) surrounding the 8203 and the text, delete only the &#8203; unicode character 'Zero Width Space'.
  7. Save the page.
Improve this answer
1

I found that removing the 8203 code from webpage has sometimes the side effect of breaking the edit mode so I check if the page is in edit mode first. I don't understand exaclty the reason why this caracter is inserted all over the place in rich text fields. It breaks the HTML formating but here is my solution (without jquery) :

(function(){ var wik, s4; wik = document.forms[MSOWebPartPageFormName] ._wikiPageMode.value !== "Edit"; s4 = document.getElementById('s4-bodyContainer'); if(wik){ s4.innerHTML = s4.innerHTML.replace(/\u200B/g,''); } // if })();

Update... here is a better updated code but it depends on jQuery :

fixCode8203 = function () { var t, n, r; t = String.fromCharCode(8203); $("body") .find(":not(iframe)") .contents() .filter(function () { return (this.nodeType === 3 && this.nodeValue.indexOf(t) !== -1); }).each(function () { n = $(this)[0].nodeValue; r = new RegExp(t, "g"); $(this)[0].nodeValue = n.replace(r, "") }); }; // fixCode8203
Improve this answer
0

I've seen this when drag selecting text. But when I triple click to select the information, no white space is copied.

Improve this answer
2
  • Interesting tip but still same result for me. With Chrome 46.0.2490.86m, whether I double-click or triple-click 2 extraneous 0x3F characters are copied. It's very frustrating. Commented Nov 13, 2015 at 15:20
  • I admit to using IE and I didn't test in Chrome. Commented Nov 13, 2015 at 20:10
0

On one page where I was having a problem with those, I added a little script to remove them automagically:

$(document).ready(function () { // remove those pesky zero width space unicode characters inserted by sharepoint $('.ms-rte-layoutszone-inner:contains("\u200B")').each(function () { $(this).html($(this).html().split("\u200B").join("")); }); $('.ms-rte-layoutszone-inner-editable:contains("\u200B")').each(function () { $(this).html($(this).html().split("\u200B").join("")); }); });

Ok, so how to add this to a Wiki Page:

First, you need to link to jQuery. If you want you can link to jQuery from a CDN (like the one on the jQuery site itself), or you can upload the jQuery library to somewhere on your site (which is what I usually do).

(If you are already loading jQuery on a custom master page or something, obviously you don't have to do this as it's being loaded already.)

To upload jQuery to somewhere on your site: I usually make a "Scripts" folder inside the "Site Assets" library and put it there. Other people like using the "Style Library". It just needs to be somewhere you (and your users) have read access to so it will load for them on the Wiki Page.

Then, on the Wiki Page, put the page in edit mode and add a Script Editor Web Part at the top of the page. Select "Edit Web Part" from the web part menu and then click on "EDIT SNIPPET". In the editor window that opens, put the following code:

// if you are loading jQuery from a CDN then your src URL will be the URL to the CDN // the URL I am using here is server relative, which I prefer, or you can use one // that is relative to the "Site Pages" library where the wiki pages are, like // "../SiteAssets/Scripts/jquery-1.11.3.min.js" <script type="text/javascript" src="/sites/MySite/SiteAssets/Scripts/jquery-1.11.3.min.js"></script> <script type="text/javascript"> $(document).ready(function () { // remove those pesky zero width space unicode characters inserted by sharepoint $('.ms-rte-layoutszone-inner:contains("\u200B")').each(function () { $(this).html($(this).html().split("\u200B").join("")); }); $('.ms-rte-layoutszone-inner-editable:contains("\u200B")').each(function () { $(this).html($(this).html().split("\u200B").join("")); }); }); </script>

Click the "Insert" button to close the script editor, "OK" to close the web part editor, and save the page. That should do it.

Improve this answer
4
  • How do you make use of this script? I tried copying it into the top of the HTML Source contained in the RichEdit field after clicking on Chrome->SharePoint Page Edit->Format Text tab->Markup->Edit Source->HTML Source edit field. But it seems that SharePoint threw away the JavaScript. Commented Nov 18, 2015 at 19:16
  • 1
    @buzz3791 Yeah, you will have to add a script editor web part to the top of the wiki page to embed the script in, and you also need to load jQuery. Do you know how to do that or should I post an example of that too? Commented Nov 18, 2015 at 19:24
  • Thanks for the tip. A pointer on how to load jQuery would be nice too. Commented Nov 18, 2015 at 19:53
  • @buzz3791 updated my answer. Commented Nov 18, 2015 at 20:55

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.