Show full language name in the Episerver page tree

A website has content in a lot of different languages, some of the language codes are kind of cryptic looking and the editors don’t recognize all of them. When they view the page tree in a specific language, pages that does not exist in that language are shown in a gray font and the language code of the page’s master language are shown. The editors wants to see the name of the language, rather than the language code.

A simplified example of an Alloy site viewed in Norwegian, only the start page are translated to Norwegian and the language codes are shown for the rest of the pages.

When faced with this challenge I reached for JavaScript, but struggled. I turned to Episerver World, and Johan Kronberg suggested I stuck to CSS only.

Using CSS Content and the starts-with-operator for selecting elements with a given title atribute, this targets the span elements containing the language code for all three languages. For this example the editor only use Norwegian or English editor UI language.

span[title^="This page is in English."]:after {
    content: "English";
}
span[title^="Denne siden er på English."]:after {
    content: "Engelsk";
}

span[title^="This page is in svenska."]:after {
    content: "Swedish";
}
span[title^="Denne siden er på svenska."]:after {
    content: "Svensk";
}

span[title^="This page is in Norsk."]:after {
    content: "Norwegian";
}
span[title^="Denne siden er på Norsk."]:after {
    content: "Norsk";
}

Ok, so the name of the language got added, but we will have to get rid of that language code.

When I hid the spans with the language code, the after-text with the language name also dissappreared, so I had to both hide the spans and set the :after visible. When an element is set to visibility: hidden, it still takes up space. Because of this, I also modified the left margin.

span[title^="This page is in English."] {
    visibility: hidden;
}
span[title^="This page is in English."]:after {
    content: "English";
    visibility: visible;
    margin-left: -15px;
}
span[title^="Denne siden er på English."] {
    visibility: hidden;
}
span[title^="Denne siden er på English."]:after {
    content: "Engelsk";
    visibility: visible;
    margin-left: -15px;
}

span[title^="This page is in svenska."] {
    visibility: hidden;
}
span[title^="This page is in svenska."]:after {
    content: "Swedish";
    visibility: visible;
    margin-left: -15px;
}
span[title^="Denne siden er på svenska."] {
    visibility: hidden;
}
span[title^="Denne siden er på svenska."]:after {
    content: "Svensk";
    visibility: visible;
    margin-left: -15px;
}

span[title^="This page is in Norsk."] {
    visibility: hidden;
}
span[title^="This page is in Norsk."]:after {
    content: "Norwegian";
    visibility: visible;
    margin-left: -15px;
}
span[title^="Denne siden er på Norsk."] {
    visibility: hidden;
}
span[title^="Denne siden er på Norsk."]:after {
    content: "Norsk";
    visibility: visible;
    margin-left: -15px;
}

The final result looks like this:

And the CSS file were registered in module.config like this:

<clientResources>
    <add name="epi-cms.widgets.base" 
        path="Styles/VerboseLanguageInPageTree.css" 
        resourceType="Style" />
</clientResources>