Smart PDF: make the text RTL

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.