Arabic Formatting (From L to R)

  • Profile Image
    Abdullah_DRI
    Asked on June 25, 2020 at 02:53 AM

    Greetings All, 

    Your kind and usual support is highly appreciated to reformat/design the Arabic version of below form to be from right to left. 

    https://form.jotform.com/201636142013440 

    Thanks in advance and looking forward for your kind feedback.. 


  • Profile Image
    jherwin
    Answered on June 25, 2020 at 03:29 AM

    Try to inject these custom CSS code to your form:

    .form-sub-label {
         direction:rtl;
    }
    .form-all {
         direction:rtl;
    }
    .form-line-column,.form-label-right,.form-radio-item { 
         float:right;
    }
    .form-label.form-label-auto {
        text-align: right;
        direction:rtl;
    }

    Guide: How-to-Inject-Custom-CSS-Codes

    Please give it a try and let us know how it goes.

  • Profile Image
    Abdullah_DRI
    Answered on June 25, 2020 at 03:54 AM

    Hi, 

    Thank you for your support..

    Please note that my form are dual languages (English & Arabic). By using the provided code it will impact the English version too.. 

    Could you please check and advise..

    Thanks,

  • Profile Image
    Patrick_R
    Answered on June 25, 2020 at 04:58 AM

    Hello! Please allow me some time to look into this, I'll get back to you shortly with an update.

    Thank you!

  • Profile Image
    Patrick_R
    Answered on June 25, 2020 at 05:49 AM

    Hi! Thank you for your patience, please find answer to your query below.

    - Please note that my form are dual languages (English & Arabic). By using the provided code it will impact the English version too.. 

    To apply CSS code top only RTL languages, you can make use of the following selector:

    .form-all[dir="rtl"]{/* css code here */}

    As you might have noticed in the above selector, the container which consists of all the form elements gets an dir="rtl" attribute as soon as the form language is switched to an RTL language.

    This means that we can define our CSS only for RTL languages using the above selector. As an example, the following CSS code will only work for RTL languages:

    .form-all[dir="rtl"]{
      background-color: beige;
    }
    .form-all[dir="rtl"] .form-line-column,
    .form-all[dir="rtl"] .form-label-right,
    .form-all[dir="rtl"] .form-radio-item{
      float: right;
    }
    .form-all[dir="rtl"] .form-label.form-label-auto {
      text-align: right;
    }

    Here is a cloned version of your form that uses this code: https://form.jotform.com/201761887884976
    Please feel free to test this form by switching its languages.

    I hope this helps. If you need further assistance, feel free to write back to us.

  • Profile Image
    Abdullah_DRI
    Answered on June 25, 2020 at 05:58 AM

    Hi Patrick, 

    Thanks for your great support..

    I have checked the cloned form and sill there is some modification required, below screen shot might clear the idea.. 

     1593079126Capture.PNG

    The questions (In Arabic) should start from RTL then follow them the input fields. 

    Looking forward for your valuable support..

    Thanks, 

  • Profile Image
    jherwin
    Answered on June 25, 2020 at 07:15 AM

    You can add this custom CSS Code to your form:

    .form-all[dir="rtl"] .form-label.form-label-auto {
        float: right!important;
        position: relative;
    }

    Here's the demo form: https://form.jotform.com/201762784758973

    Give it a try and let us know if it still not works as expected.

  • Profile Image
    Abdullah_DRI
    Answered on June 29, 2020 at 02:31 AM

    Hi,

    Thanks a lot for your great support..

    The form is good but there is small modification that I need your kind support in.. :) 

    There is 2 questions are still from L2R in the Arabic version, please refer to the below snapshots.

    15934121641.PNG15934121772.PNG

    Moreover, the English form background is white, I have used the clone form that you have shared and the Arabic version is kind of yellow, can you advise how to make the Arabic version same as the English (white).. 

    Thanks & Regards, 

  • Profile Image
    jherwin
    Answered on June 29, 2020 at 04:28 AM

    Please replace all of the RTL Code in your form with this:

    /* RTL code */
    .form-all[dir="rtl"]{
    background-color: white!important;
    }
    .form-all[dir="rtl"] .form-line-column,
    .form-all[dir="rtl"] .form-label-right,
    .form-all[dir="rtl"] .form-radio-item{
    float:right;
    }
    .form-all[dir="rtl"] .form-label.form-label-auto {
        text-align: right;
    }
    .form-all[dir="rtl"] .form-label.form-label-auto {
        float: right!important;
        position: relative;
    }
    .form-all[dir="rtl"] .form-label-top{
        text-align:right!important;
        position: relative;
    }

    Give it a try and let us know how it goes.

    Demo formhttps://form.jotform.com/201762784758973

  • Profile Image
    Abdullah_DRI
    Answered on June 29, 2020 at 04:38 AM

    Jherwin, 

    Thanks a lot for your great support. Much appreciated!

    Just a quick query, when you ask me to replace the new CSS code, can you specify where.. :) 

    For the time-being, I will use the share form in your past reply.. 

  • Profile Image
    jherwin
    Answered on June 29, 2020 at 05:56 AM

    I'm referring to these line of codes, please check my screencast below.
    15934243614niJsmwFKh.gif
    Just look for the "/* RTL code */" comment.

    Anyway, since you clone my demo form, it has the updated CSS code so there is no need to update it.

    Let us know if you need any further assistance. We will be happy to help.