Add ZERO WIDTH SPACE to TOC yml

[DeluxZ]

I'm using DocFX to generate our API documentation. I'm currently working on styling our own theme. The problem is our namespace are quite long so they disappear from the menu. When I was looking at the Microsoft .NET Core API documentation I saw they added the ZERO WIDTH SPACE character to the a href. Trying to do something like this for our documentation ended up in editing the toc.yml in the /api directory. But since this file is generated in a build on VSTS this will not work.

Now I'm figuring out how I can add this ZERO WIDTH SPACE before the dots in our namespace. Together with adding word-wrap: break-word; to the CSS will result in nice word breaking in the menu.

Curious if it's a useful edit to docfx or if it should be in a plugin.

Related to:
#234 (comment)
#1222 (comment)

[superyyrrzz]

It's nice to insert the SPACE when constructing the toc DOM in DocFX's theme.

[DeluxZ]

@hellosnow w I thought you added a comment too (according to the e-mail notification I got, as well as @vicancy). I took another look at the .NET Core API docs. If you look at the source of the menu at the left you will see.

<li aria-expanded="false" tabindex="1" aria-treeitem="true" class="noSubs">
    <a tabindex="1" href="/en-us/aspnet/core/api/microsoft.aspnet.identity.corecompat" data-text="microsoft.aspnet.identity.corecompat">Microsoft&#8203;.AspNet&#8203;.Identity&#8203;.CoreCompat</a>
    <ul aria-treegrid="true">
        <!-- hidden for clarity -->
        </li>
    </ul>
</li>

The most important part here is the text between the a tag Microsoft​.AspNet​.Identity​.CoreCompat. Where ​ is the HTML encoded ZERO WIDTH SPACE HTML Unicode ref. Looking further into the source of the API docs I saw a global.js with the following function

var breakDots =  function(str) {
    if(str && str.length){
        return str.split('.').join('\u200B.');
    }
    return str;
};

Maybe that is the way to go instead of implementing this in the backend.

In order to answer your question @hellosnow Will it work to change style of docfx.css? For example updating style of .toc .nav > li > a. Just by adding word-wrap: break-word; won't fix it, CSS will just break when there is no more space to render more characters. By adding the ZERO WIDTH SPACE CSS thinks there is a space to break on without actually seeing the space as an user 👍

[vwxyzh]

@qinezh , what about search?

[qinezh]

@vwxyzh agree with it, the change may affect the filter box in left toc. Do we need update the toc filter logic at the same time @vicancy

[vicancy]

@qinezh @vwxyzh nice catch, let's change the display text and meanwhile keep title unchanged, frontend change to use value of title for toc filter @superyyrrzz

[hellosnow]

@vicancy sounds a good approach. 👍