Button translation for RTL language | XM Community
Skip to main content

Hi there.

When I’m using a text saved in the Library (look and feel message) for a next button all is well for the English. But on the Hebrew (RTL language) the button is shown with its CSS… anyone knows how to correct this?

 

It is truly annoying :(

 

@TomG  maybe you know how to ? or @Deepak ?

 

 

@deveer2024 

<div dir="rtl">אפשר להתחיל</div>
Try including above again in your source message for Hebrew as I am not facing this issue.


Thanks @Deepak 

I looked at the source and it has the same as you mentioned. I even deleted it and copy pasted it again from your message. 

Whatever I do, it doesn’t work… it appears again. 

The same happens for me in Arabic. 

 

Can you please have a look at the following custom CSS and tell me if something there contradict the button?

 

@font-face {
  font-family: English Language;
  src: url(https://nayaxcx.qualtrics.com/ControlPanel/File.php?F=F_Ry27azor8dI3vgS);
  font-style: normal;
  font-weight: 400
}
@font-face {
  font-family: Arabic Language;
  src: url(https://payoneer.eu.qualtrics.com/ControlPanel/File.php?F=F_hMA1CIaAGVHiYH9);
  font-style: normal;
  font-weight: 400
}
@font-face {
  font-family: Brazilian Portuguess Language;
  src: url(https://payoneer.eu.qualtrics.com/ControlPanel/File.php?F=F_mT405nurqiXeaEL);
  font-style: normal;
  font-weight: 400
}
@font-face {
  font-family: Chinese Language;
  src: url(https://payoneer.eu.qualtrics.com/ControlPanel/File.php?F=F_Kw720B0nnzA3f9q);
  font-style: normal;
  font-weight: 400
}
@font-face {
  font-family: Japanese Language;
  src: url(https://payoneer.eu.qualtrics.com/ControlPanel/File.php?F=F_Q2AaRkGRHUiGkUD);
  font-style: normal;
  font-weight: 400
}
@font-face {
  font-family: Korean Language;
  src: url(https://payoneer.eu.qualtrics.com/ControlPanel/File.php?F=F_ZhSHeb5jS6Hln4C);
  font-style: normal;
  font-weight: 400
}
@font-face {
  font-family: Russian Language;
  src: url(https://payoneer.eu.qualtrics.com/ControlPanel/File.php?F=F_mT405nurqiXeaEL);
  font-style: normal;
  font-weight: 400
}
@font-face {
  font-family: Spanish Language;
  src: url(https://payoneer.eu.qualtrics.com/ControlPanel/File.php?F=F_mT405nurqiXeaEL);
  font-style: normal;
  font-weight: 400
}
@font-face {
  font-family: Thai Language;
  src: url(https://payoneer.eu.qualtrics.com/ControlPanel/File.php?F=F_7ziyMjRTkPUCijV);
  font-style: normal;
  font-weight: 400
}
@font-face {
  font-family: Turkish Language;
  src: url(https://payoneer.eu.qualtrics.com/ControlPanel/File.php?F=F_mT405nurqiXeaEL);
  font-style: normal;
  font-weight: 400
}
@font-face {
  font-family: Ukrainian Language;
  src: url(https://payoneer.eu.qualtrics.com/ControlPanel/File.php?F=F_mT405nurqiXeaEL);
  font-style: normal;
  font-weight: 400
}
@font-face {
  font-family: Hebrew Language;
  src: url(https://nayaxcx.qualtrics.com/ControlPanel/File.php?F=F_xkXpO96vjyFd4QK);
  font-style: normal;
  font-weight: 400
}
@font-face {
  font-family: Serbian Language;
  src: url(https://payoneer.eu.qualtrics.com/ControlPanel/File.php?F=F_mT405nurqiXeaEL);
  font-style: normal;
  font-weight: 400
}
@font-face {
  font-family: Vietnamese Language;
  src: url(https://payoneer.eu.qualtrics.com/ControlPanel/File.php?F=F_jWFGZfslwHRMUHE);
  font-style: normal;
  font-weight: 400
}

    font-family: 'English Language' !important;
}
{lang='AR'] .Skin {
  font-family: 'Arabic Language' !important;
}
Slang='AR'] .Skin .QuestionText {
  font-size: 24px !important;
}
lang='AR'] .Skin .QuestionBody,
zlang='AR'] .Skin .Matrix .QuestionBody.CarouselQuestionBody .CarouselAnswerButton,
.lang='AR'] .Skin .Matrix .QuestionBody.CarouselQuestionBody .CarouselCardTextContainer {
  font-size: 20px !important;
}
ulang='PT-BR'] .Skin {
  font-family: 'Brazilian Portuguess Language' !important;
}
>lang='ZH-S'] .Skin {
  font-family: 'Chinese Language' !important;
}
]lang='JA'] .Skin {
  font-family: 'Japanese Language' !important;
}
]lang='KO'] .Skin {
  font-family: 'Korean Language' !important;
}
Klang='RU'] .Skin {
  font-family: 'Russian Language' !important;
}
Rlang='ES'] .Skin {
  font-family: 'Spanish Language' !important;
}
'lang='TH'] .Skin {
  font-family: 'Thai Language' !important;
}
alang='TR'] .Skin {
  font-family: 'Turkish Language' !important;
}
glang='UK'] .Skin {
  font-family: 'Ukrainian Language' !important;
}
=lang='HE'] .Skin {
  font-family: 'Hebrew Language' !important;
}
llang='HE'] .Skin .QuestionText {
  font-size: 24px !important;
}
>lang='HE'] .Skin .QuestionBody,
/lang='HE'] .Skin .Matrix .QuestionBody.CarouselQuestionBody .CarouselAnswerButton,
'lang='HE'] .Skin .Matrix .QuestionBody.CarouselQuestionBody .CarouselCardTextContainer {
  font-size: 20px !important;
}
olang='SR'] .Skin {
  font-family: 'Serbian Language' !important;
}
>lang='VI'] .Skin {
  font-family: 'Vietnamese Language' !important;
}


#SurveyEngineBody .Skin .MC .MAHR table.ChoiceStructure td, 
#SurveyEngineBody .Skin .MC .SAHR table.ChoiceStructure td, 
#SurveyEngineBody .Skin .NPS table.ChoiceStructure td { 
    text-align: center 

  
#SurveyEngineBody .Skin .LabelWrapper { 
    width: 100%; 

  
#SurveyEngineBody .Skin .MC .QuestionBody label { 
    vertical-align: 1px; 

  
#SurveyEngineBody .Skin label.MultipleAnswer, 
#SurveyEngineBody .Skin table.ChoiceStructure label.SingleAnswer { 
    cursor: pointer; 
    background: #f1f1f1 !important; 
    background: rgba(0, 0, 0, .06) !important; 
    border: none; 
    transition: background .2s ease-in-out; 
    display: block; 
    text-align: center; 
    -webkit-border-radius: 4px; 
    -moz-border-radius: 4px; 
    -ms-border-radius: 4px; 
    -o-border-radius: 4px; 
    border-radius: 4px; 

#SurveyEngineBody .Skin .Selection label.MultipleAnswer, 
#SurveyEngineBody .Skin table.ChoiceStructure label.MultipleAnswer, 
#SurveyEngineBody .Skin table.ChoiceStructure label.SingleAnswer { 
    text-align: left !important; 

#SurveyEngineBody .Skin .NPS table.ChoiceStructure label.SingleAnswer { 
    text-align: center !important; 

.RTL#SurveyEngineBody .Skin .Selection label.MultipleAnswer, 
.RTL#SurveyEngineBody .Skin table.ChoiceStructure label.MultipleAnswer, 
.RTL#SurveyEngineBody .Skin table.ChoiceStructure label.SingleAnswer { 
    text-align: right !important; 

.RTL#SurveyEngineBody .Skin .NPS table.ChoiceStructure label.SingleAnswer { 
    text-align: center !important; 

  
.RTL .Skin label.SingleAnswer>span::before, .RTL .Skin label.MultipleAnswer>span::before { 
    left: auto; 
    right: 0px; 

.RTL .Skin label.MultipleAnswer, .RTL .Skin label.SingleAnswer { 
    padding-right: 40px !important; 
    padding-left: 0 !important; 

  
span.LabelWrapper label>span { 
    display: inline-block; 

  
#SurveyEngineBody .Skin .MC label.q-checkbox, 
#SurveyEngineBody .Skin .MC table.ChoiceStructure label.q-radio { 
    display: none; 

  
#SurveyEngineBody .Skin .MC .QuestionBody table.ChoiceStructure label { 
    vertical-align: 1px; 

  
#SurveyEngineBody .Skin label.q-radio { 
    -webkit-border-radius: 100%; 
    -moz-border-radius: 100%; 
    -ms-border-radius: 100%; 
    -o-border-radius: 100%; 
    border-radius: 100%; 

  
#SurveyEngineBody .Skin label.q-checkbox, 
#SurveyEngineBody .Skin table.ChoiceStructure label.q-radio { 
    border: 2px solid #111; 
    width: 1.1em; 
    height: 1.1em; 
    display: inline-block; 
    background: 0 0; 

  
#SurveyEngineBody .Skin label.MultipleAnswer.q-checked, 
#SurveyEngineBody .Skin table.ChoiceStructure label.SingleAnswer.q-checked { 
    background: #FFCC00 !important; 
    border-color: #000; 
    color: #000; 

  
#SurveyEngineBody .Skin table.ChoiceStructure .QuestionBody { 
    color: #000; 
    font-size: 16px; 
    overflow-y: hidden; 
    padding: 0 20px 20px 20px !important; 
    position: relative; 
    z-index: 1; 

@media (max-width: 768px) {
    #SurveyEngineBody .Skin table.ChoiceStructure .QuestionBody {
        padding: 0 10px 10px 10px !important;
    }
}

.JFEScope .PageErrorDialog {
    background-color: #ffffff !important;
    color: #ffffff !important;
}

.JFEScope .PageErrorDialog .ErrorContainer {
    color: #000000 !important;
}

.JFEScope .PageErrorDialog .ErrorTitle {
    background: inherit !important;
    background-color: #d0cbf5 !important;
    color: #000000 !important;
}

.JFEScope .PageErrorDialog .ErrorButtons button {
    background: inherit !important;
    background-color: #dfdcf8 !important;
    color: #00000 !important;
    font-size: 13.5px;
}


.JFEScope .PageErrorDialog .ErrorButtons button:hover {
    background: inherit !important;
    background-color: #ffefb2 !important;
    color: #000000 !important;
    font-size: 13.5px;
}

inputrtype="text"],
textarea {
    font-size: 22px !important;
}


/* code for matrix question choice redesign */
@media (max-width: 768px) {
    #SurveyEngineBody .Skin table.ChoiceStructure .QuestionBody {
        padding: 0 10px 10px 10px !important;

    }
    #SurveyEngineBody .Skin .Matrix {
        max-width: 100%;
    }
    #SurveyEngineBody .Skin .Matrix table td {
        border: 0px !important;
    }
    #SurveyEngineBody .Skin .Matrix .Likert .ChoiceRow:hover {
        background: #ffe57f !important;
    }
    #SurveyEngineBody .Skin .Matrix .Likert .q-matrix .single-answer {
        display: flex !important;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        background: #e9e9e9 !important;
        border: none;
        transition: background .2s ease-in-out;
        text-align: center;
        border-radius: 4px;
        padding: 15px 5px;
        min-width: 90px;
        width: 90%;
    }
    #SurveyEngineBody .Skin .Matrix .Likert .q-matrix table thead {
        display: none !important;
    }
    #SurveyEngineBody .Skin .Matrix .Likert .q-matrix .last .single-answer {
        background: #676767 !important;
        color: #fff;
    }
    #SurveyEngineBody .Skin .Matrix .Likert .q-matrix .q-radio.q-checked~.single-answer {
        background: #ffcc00 !important;
        color: #fff;
    }
    #SurveyEngineBody .Skin .Matrix .Likert .q-matrix .q-radio {
        display: none !important;
    }
}


Leave a Reply