Smart PDF: make the text RTL in the Original PDF

how i control the output data like font and make it from right to left because the data maybe to be arabic so i want to control the output data to be in the meddle or from left to right or from right to left, thanks for ur support

Note:

i uploaded pdf fill and make a smart pdf form

Hi gulftechnicalservice2024, 

Thanks for reaching out to Jotform Support. Just to confirm, are you trying to customize the answer fields on the original PDF or on the online form?

If you’re referring to the original Smart PDF, unfortunately, you can't change the font, alignment, or text direction for mapped fields on the original Smart PDF. The Smart PDF tool uses the fixed design of the uploaded PDF and simply overlays the field responses onto it. It doesn't allow styling of how the mapped text appears. Take a look at the screenshot below to see my results:However, if you're referring to the online form, you can control how the text is displayed. You can easily make the text alignment of your online form right to left by Injecting CSS Codes into your form. Let me walk you through it:

1. First, copy this code:

.form-label.form-label-auto {

    display : block;

    float : none;

    text-align : right;

    width : 100%;

}

.form-all, .form-header, .form-subHeader, .form-textarea, .form-textbox {

direction: rtl;

text-align: right !important;

}

.form-checkbox-item:not(#foo) label:before, .form-radio-item:not(#foo) label:before {

right: 0;

margin-right: 0;

float: right;

}

.form-radio-item:not(#foo) label:after {

right: 4px;

}

.form-checkbox-item:not(#foo) label:after {

right: 8px;

}

.form-checkbox-item:not(#foo) label {

float: right;

}

.form-all .form-section .form-col-2 {

width: 33.3% !important;

}

.form-label, label.form-label.form-label-auto, label.form-label:not(.form-label-top) {

text-align: right !important;

}

span.phone-separate {

display: none;

}

.form-line-error .form-error-message {

right: unset !important;

left: 0 !important;

text-align: left;

}

.form-checkbox-item:not(#foo) label:after {

right: 0;

}

.form-multiple-column, .form-single-column {

width: 100%;

display: inline-flex;

flex-wrap: wrap;

}

.form-multiple-column .form-checkbox-item, .form-multiple-column .form-radio-item, .form-single-column .form-checkbox-item, .form-single-column .form-radio-item {

width: 100%;

}

.form-checkbox+label, .form-checkbox+span, .form-radio+label, .form-radio+span {

padding-right: 30px;

padding-left: 0;

}

.form-matrix-values label.matrix-choice-label {

padding-right: 20px;

padding-left: 0;

}

.form-label:not(.form-label-top) + .form-input .form-address-line + .form-address-line, .form-sub-label-container + .form-sub-label-container {

margin-right: 8px;

}

.form-address-line + .form-address-line {

margin-left: 0;

}

.form-product-item .p_image .image_area {

margin-left: 10px;

margin-right: 10px;

}

.form-textbox, .form-textarea, .form-dropdown {

text-align: right;

}

2. In Form Builder, click on the Paint Roller icon on the right side of the page to open Form Designer.

3. Now, in the Form Designer menu, click on the Styles tab, scroll down and paste the code into the Inject CSS Code box. That’s it. The code is automatically saved.

Check out the screenshot below to see my results:Give it a try and let us know how it goes.

hello,

thanks for ur reply

i tried ur solution but no change in the output file all word from right to left
any other solution ? i have free time to try and try to reach my goals

thx

Hi gulftechnicalservice2024,

The custom CSS my colleague shared only changes how the elements look in the form. It doesn’t affect the actual submission data. If your users type their answers in RTL, they’ll appear exactly the same way in the submission.

For non-RTL texts, like dropdown options, they’ll show up as non-RTL in the submission since they weren’t written in RTL when you set them up. You can manually translate those options into RTL so they’ll also appear in RTL in the submissions. Check out the screenshot below for an example:

Give it a try and let us know if you need any more help.