Using HelpDocs with RTL Languages

Updated a month ago ​by Jake Peters

The HelpDocs text editor has a button you can click to switch text direction for RTL (right-to-left) languages like Hebrew. But there's some other parts of your template you'll want to edit to make everything appear in the right (pun intended) direction.

These snippets have been tested with the Boxed (v3) template. If you're using another template, there may be other customizations required.

The CSS

Paste this snippet into SettingsCode > Custom CSS
@media (min-width: 70em) {
    #article .card.responsive-toc {
        margin-right: 0px !important;
        margin-left: 0px !important;
    }
}
#article #body p.meta, 
#category #articles p.card-text img, 
#category #articles p.card-text .text-muted, 
#home #categories #category p.card-text:last-of-type {
    display: none !important;
}
#article .tip-callout::before,
#article .note-callout::before,
#article .warning-callout::before {
    margin-right: 40px !important;
}
#article .tip-callout,
#article .note-callout,
#article .warning-callout {
    border-right-width: 5px !important;
    border-left-width: 0 !important;
}
#search-sm ul.search-results li a,
#search-lg ul.search-results li a {
    text-align: right !important;
}

The Javascript

Paste this snippet into Settings > Code > Custom CSS
<script>
    (function () {
        $(function () {
            $('#content').attr('dir', 'rtl');
            $('h2.card-title').attr('dir', 'rtl');
            $('#category #articles p.card-text').attr('dir', 'rtl');
            $('#main[data-hd-template="boxedv3"] #category #articles h3.card-title').attr('dir', 'rtl');
            $('#home #categories #category p.card-text').attr('dir', 'rtl');
            $('#category p.meta').attr('dir', 'rtl');
            $('#category h3.category-title').attr('dir', 'rtl');
            $('#main[data-hd-template="boxedv3"] #searchresults #articles h3.card-title').attr('dir', 'rtl');
            $('.hvr-card p.card-description').attr('dir', 'rtl');
            $('input').attr('dir', 'rtl');
            $('p#breadcrumbs').attr('dir', 'rtl');
        });
    })();
</script>

How did we do?