diff --git a/src/common-elements/panels.ts b/src/common-elements/panels.ts
index 2f30b399..f41845fc 100644
--- a/src/common-elements/panels.ts
+++ b/src/common-elements/panels.ts
@@ -4,6 +4,8 @@ import styled, { media } from '../styled-components';
 export const MiddlePanel = styled.div`
   width: calc(100% - ${props => props.theme.rightPanel.width});
   padding: 0 ${props => props.theme.spacing.sectionHorizontal}px;
+  direction: ${props => props.theme.typography.direction || 'ltr'};
+  text-align: ${props => (props.theme.typography.direction === 'rtl') ? 'right' : 'inherit'};
 
   ${media.lessThan('medium', true)`
     width: 100%;
diff --git a/src/components/ApiInfo/styled.elements.ts b/src/components/ApiInfo/styled.elements.ts
index 72bebcd4..937587b7 100644
--- a/src/components/ApiInfo/styled.elements.ts
+++ b/src/components/ApiInfo/styled.elements.ts
@@ -28,7 +28,15 @@ export const DownloadButton = styled.a`
 export const InfoSpan = styled.span`
   &::before {
     content: '|';
-    display: inline-block;
+    display: ${props => (props.theme.typography.direction === 'ltr') ? 'inline-block' : 'none'};
+    opacity: 0.5;
+    width: ${delimiterWidth}px;
+    text-align: center;
+  }
+
+  &::after {
+    content: '|';
+    display: ${props => (props.theme.typography.direction === 'rtl') ? 'inline-block' : 'none'};
     opacity: 0.5;
     width: ${delimiterWidth}px;
     text-align: center;