diff --git a/layouts/partials/shortcodes/expand.html b/layouts/partials/shortcodes/expand.html
index 8cb46d2c10..ecd727202f 100644
--- a/layouts/partials/shortcodes/expand.html
+++ b/layouts/partials/shortcodes/expand.html
@@ -6,15 +6,14 @@
 {{- if eq (printf "%T" $expanded) "string" }}
 	{{- $expanded = (eq $expanded "true") }}
 {{- end }}
-{{- $direction := T "Reading-direction" | default "ltr" }}
 {{- with $context }}
 {{- $id := partial "make-random-md5.hugo" }}
 <div class="expand">
     <input type="checkbox" id="expand-{{ $id }}" aria-controls="expandcontent-{{ $id }}" {{ if $expanded }} checked{{ end }}>
     <label class="expand-label" for="expand-{{ $id }}" >
         <i class="fas fa-chevron-down"></i>
-        <i class="fas fa-chevron-left expand-rtl direction-{{ $direction }}"></i>
-        <i class="fas fa-chevron-right expand-ltr direction-{{ $direction }}"></i>
+        <i class="fas fa-chevron-left expand-rtl"></i>
+        <i class="fas fa-chevron-right expand-ltr"></i>
         {{ $title }}
     </label>
     <div id="expandcontent-{{ $id }}" class="expand-content">
diff --git a/layouts/partials/shortcodes/tabs.html b/layouts/partials/shortcodes/tabs.html
index 4f8440febc..1068c6097f 100644
--- a/layouts/partials/shortcodes/tabs.html
+++ b/layouts/partials/shortcodes/tabs.html
@@ -1,14 +1,13 @@
 {{- $context := .context }}
 {{- $tabs := .tabs | default slice }}
 {{- $groupid := .groupid | default "default" }}
-{{- $direction := T "Reading-direction" | default "ltr" }}
 {{- with $context }}
 <div class="tab-panel" data-tab-group="{{ $groupid }}">
   <div class="tab-nav">
   {{- range $idx, $tab := $tabs }}
     <button
       data-tab-item="{{ .name }}"
-      class="tab-nav-button direction-{{ $direction }} {{ cond (eq $idx 0) "active" ""}}"
+      class="tab-nav-button{{ cond (eq $idx 0) " active" ""}}"
       onclick="switchTab('{{ $groupid }}','{{ .name }}')"
     >
       <span>{{ .name }}</span></button>
@@ -18,7 +17,7 @@
     {{- range $idx, $tab := $tabs }}
     <div
       data-tab-item="{{ .name }}"
-      class="tab-content-text {{ cond (eq $idx 0) "active" ""}}"
+      class="tab-content-text{{ cond (eq $idx 0) " active" ""}}"
     >
 {{ .content | safeHTML }}
     </div>
diff --git a/static/css/ie.css b/static/css/ie.css
index b8df6663df..a8d4b40ea7 100644
--- a/static/css/ie.css
+++ b/static/css/ie.css
@@ -44,7 +44,7 @@
 	#body .tab-nav-button {
 		margin-left: 4px;
 	}
-	#body .tab-nav-button.direction-rtl {
+	html[dir="rtl"] #body .tab-nav-button {
 		float: left;
 	}
 	#body .tab-nav-button:first-child {
diff --git a/static/css/tabs.css b/static/css/tabs.css
index d58bf479b9..5bb0ca0592 100644
--- a/static/css/tabs.css
+++ b/static/css/tabs.css
@@ -20,7 +20,7 @@
     padding: 6px 12px;
     position: relative;
 }
-#body .tab-nav-button.direction-rtl{
+html[dir="rtl"] #body .tab-nav-button{
     float: right;
 }
 
diff --git a/static/css/theme.css b/static/css/theme.css
index 7ec93d78a7..6a3659fb4d 100644
--- a/static/css/theme.css
+++ b/static/css/theme.css
@@ -1118,8 +1118,8 @@ option {
 }
 
 /* turn off unsuitable expander for this reading direction */
-.expand > .expand-label > .expand-rtl.direction-ltr,
-.expand > .expand-label > .expand-ltr.direction-rtl {
+html[dir="ltr"] .expand > .expand-label > .expand-rtl,
+html[dir="rtl"] .expand > .expand-label > .expand-ltr {
     display: none;
 }