How to properly set text direction attribute = RTL for the entire app using bootstrap rails?

I am learning to use bootstrap gem 4.2.1 with rails 5.2.2, and facing some difficulty understanding on how to set the direction of content for the entire rails app to be Right to Left.

First two lines of my file app/views/layout/application.html.erb

<!DOCTYPE html>
<html lang="ur" dir="rtl">

nicely flip the bootstrap nav.

other html elements such as h1 continue to display content right to left unless I override the style in app/assets/stylesheets/application.scss as shown below

 p{
    font-family: 'Jameel Noori Nastaleeq';
    src:asset-url('JameelNooriNastaleeq.ttf') format("truetype");
    float:right;
    direction: rtl;

}

.navbar-brand{
    font-family: 'Jameel Noori Nastaleeq';
    src:asset-url('JameelNooriNastaleeq.ttf') format("truetype");
}

p tags render the contents as desired from right to left. All other tags such as h1 render contents from left to right.

My question is how can I set the direction of contents right to left for the entire rails app?

Entire code of my rails app is available on github.

Solution

I suspect that the Bootstrap library overrides the behaviour that you are setting in the <html> tag with the rtl attribute.

On their github repo it says that they don't support RTL as of now.. So the recommended approach is to use customized bootstrap library with RTL support like this one: bootstrap-rtl.

The only thing that might be a problem in your specific situation is that you use Bootstrap 4.2 and I'm not sure if bootstrap-rtl supports all 4.2 features since it's for 3.X.