blockquotes reversed for a multi language site

Question

'I will be coding a website that will have Arabic. it reads right to left. The formatting is coming for rest of the page but not for the blockquote. i tried setting it with lang attribute but when i do that, before quotes are going. I'm asking the community for experience and possible pitfalls.'

'''

blockquote {
  background-color: #f4f7fc;
  font-size: 20px;
  color: #191514;
  line-height: 1.7;
  position: relative;
  padding: 50px 30px 30px 115px;
  font-family: 'Poppins', sans-serif;
  clear: both;
  margin: 40px 0;
  overflow: hidden;
  
}

blockquote p {
  margin-bottom: 0 !important;
}
blockquote cite {
  font-style: normal;
  display: block;
  color: #9b6f45;
  font-weight: 700;
  font-size: 16px;
  margin-top: 11px;
}

    
blockquote:before {

  content: '\f10d';
  font-family: "FontAwesome";
  color: #d5aa6d;
  font-size: 28px;
  position: absolute;
  left: 22px;
  top: 10px;
  font-style: normal;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#d5aa6d), to(#9b6f45));
  background-image: -webkit-linear-gradient(top, #d5aa6d, #9b6f45);
  background-image: -moz-linear-gradient(top, #d5aa6d, #9b6f45);
  background-image: -ms-linear-gradient(top, #d5aa6d, #9b6f45);
  background-image: -o-linear-gradient(top, #d5aa6d, #9b6f45);
  background-image: linear-gradient(top, #d5aa6d, #9b6f45);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#d5aa6d', endColorStr='#9b6f45');
  background-color: transparent;
  background-clip: text;
  -moz-background-clip: text;
  -webkit-background-clip: text;
  text-fill-color: transparent;
  -moz-text-fill-color: transparent;
  -webkit-text-fill-color: transparent;
  z-index: 2;
  }

blockquote:after {
   content: '\f10e';
  font-family: "FontAwesome";
  color: #d5aa6d;
  font-size: 28px;
  position: absolute;
  right: 22px;
  bottom: 10px;
  font-style: normal;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#d5aa6d), to(#9b6f45));
  background-image: -webkit-linear-gradient(top, #d5aa6d, #9b6f45);
  background-image: -moz-linear-gradient(top, #d5aa6d, #9b6f45);
  background-image: -ms-linear-gradient(top, #d5aa6d, #9b6f45);
  background-image: -o-linear-gradient(top, #d5aa6d, #9b6f45);
  background-image: linear-gradient(top, #d5aa6d, #9b6f45);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#d5aa6d', endColorStr='#9b6f45');
  background-color: transparent;
  background-clip: text;
  -moz-background-clip: text;
  -webkit-background-clip: text;
  text-fill-color: transparent;
  -moz-text-fill-color: transparent;
  -webkit-text-fill-color: transparent;
  z-index: 2;
}
}

'''
'''

<blockquote lang="en">
<ul>
    <li>This is in english</li>
    </ul>
</blockquote>

<blockquote lang="ar">
<ul>
    <li>هذا باللغة العربية</li>
    
</ul>
</blockquote>

'''

Germano Plebani · Answer 1 · 2020-08-19T12:19:43.760

You can target attribute lang on the blockquote tag and add direction rule:

blockquote[lang="ar"] {
  direction: rtl;
}

blockquote {
  background-color: #f4f7fc;
  font-size: 20px;
  color: #191514;
  line-height: 1.7;
  position: relative;
  padding: 50px 30px 30px 115px;
  font-family: 'Poppins', sans-serif;
  clear: both;
  margin: 40px 0;
  overflow: hidden;
}

blockquote[lang="ar"] {
  direction: rtl;
}

blockquote p {
  margin-bottom: 0 !important;
}
blockquote cite {
  font-style: normal;
  display: block;
  color: #9b6f45;
  font-weight: 700;
  font-size: 16px;
  margin-top: 11px;
}

    
blockquote:before {
  content: '\f10d';
  font-family: "FontAwesome";
  color: #d5aa6d;
  font-size: 28px;
  position: absolute;
  left: 22px;
  top: 10px;
  font-style: normal;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#d5aa6d), to(#9b6f45));
  background-image: -webkit-linear-gradient(top, #d5aa6d, #9b6f45);
  background-image: -moz-linear-gradient(top, #d5aa6d, #9b6f45);
  background-image: -ms-linear-gradient(top, #d5aa6d, #9b6f45);
  background-image: -o-linear-gradient(top, #d5aa6d, #9b6f45);
  background-image: linear-gradient(top, #d5aa6d, #9b6f45);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#d5aa6d', endColorStr='#9b6f45');
  background-color: transparent;
  background-clip: text;
  -moz-background-clip: text;
  -webkit-background-clip: text;
  text-fill-color: transparent;
  -moz-text-fill-color: transparent;
  -webkit-text-fill-color: transparent;
  z-index: 2;
  }

   blockquote[lang="ar"]:before {
  content: '\f10e';
  right: 22px;
  left: auto;
}

blockquote:after {
   content: '\f10e';
  font-family: "FontAwesome";
  color: #d5aa6d;
  font-size: 28px;
  position: absolute;
  right: 22px;
  bottom: 10px;
  font-style: normal;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#d5aa6d), to(#9b6f45));
  background-image: -webkit-linear-gradient(top, #d5aa6d, #9b6f45);
  background-image: -moz-linear-gradient(top, #d5aa6d, #9b6f45);
  background-image: -ms-linear-gradient(top, #d5aa6d, #9b6f45);
  background-image: -o-linear-gradient(top, #d5aa6d, #9b6f45);
  background-image: linear-gradient(top, #d5aa6d, #9b6f45);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#d5aa6d', endColorStr='#9b6f45');
  background-color: transparent;
  background-clip: text;
  -moz-background-clip: text;
  -webkit-background-clip: text;
  text-fill-color: transparent;
  -moz-text-fill-color: transparent;
  -webkit-text-fill-color: transparent;
  z-index: 2;
}

blockquote[lang="ar"]:after {
  content: '\f10d';
  right: auto;
  left: 22px;
}

'''
'''

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />

<blockquote lang="en">
<ul>
    <li>This is in english</li>
    </ul>
</blockquote>

<blockquote lang="ar">
<ul>
    <li>هذا باللغة العربية</li>
    
</ul>
</blockquote>

score -1 · Answer 2 · answered Aug 19 '20 at 08:02

-1

add class to blockquote element, and set the class styling direction attribute to rtl

answered Aug 19 '20 at 08:02

Rizki Masjahri

38
5

my problem is not the text, its coming correct way. the problem is with the quotes. i have assigned fixed positions to it in english, so how will i assign for arabic. – crashoverrride Aug 19 '20 at 08:30

blockquotes reversed for a multi language site

2 Answers2