[FIX] web: force ltr for phone numbers in reports

FYI: while letters are written right to left in languages like hebrew, arabic,
persian, the numbers (including phone numbers) are written left to right

STEPS:

* via Odoo Studio add Address block (select "doc > Customer" for field
expression)
* create a sale order for customer with rtl language
* set phone number for the customer with plus sign, e.g. +1 222 33 44 55
* print Quotation / Order

BEFORE: 222 33 44 55 1+ or similar mess

AFTER: +1 222 33 44 55

WHY:

* css is copy-pasted from ui.scss:

  https://github.com/odoo/odoo/blob/6ba81c99d0c7f8e57ae573318f5e3d1ff53fa561/addons/web/static/src/scss/ui.scss#L91-L98

* Address block already has o_force_ltr class

  https://github.com/odoo/odoo/blob/6ba81c99d0c7f8e57ae573318f5e3d1ff53fa561/odoo/addons/base/views/ir_qweb_widget_templates.xml#L35-L36

DEPLOYMENT: to fix phone in footer, you need to upgrade ``web`` module

---

opw-2368525

closes odoo/odoo#61410

X-original-commit: 6f0957466165a418762d10ddac658d642547a9cb
Signed-off-by: Ivan Yelizariev // IEL <yelizariev@users.noreply.github.com>

2 files changed, 14 insertions, 4 deletions

diff --git a/addons/web/static/src/scss/report.scss b/addons/web/static/src/scss/report.scss
index 0edc31005f4..8e29f0ceacb 100644
--- a/addons/web/static/src/scss/report.scss
+++ b/addons/web/static/src/scss/report.scss
@@ -12,6 +12,16 @@ body {
     word-wrap: break-word;
     font-family: $o-default-report-font;
 }
+
+span.o_force_ltr {
+    display: inline-block;
+}
+.o_force_ltr, .o_field_phone {
+    unicode-bidi: embed; // ensure element has level of embedding for direction
+    /*rtl:ignore*/
+    direction: ltr;
+}
+
 .border-black td, .border-black th {
     border-top: 1px solid black !important;
 }
diff --git a/addons/web/views/report_templates.xml b/addons/web/views/report_templates.xml
index 0dda4eaab88..4825d25efb1 100644
--- a/addons/web/views/report_templates.xml
+++ b/addons/web/views/report_templates.xml
@@ -359,7 +359,7 @@
         <div t-attf-class="o_company_#{company.id}_layout footer o_background_footer">
             <div class="text-center">
                 <ul class="list-inline">
-                    <li t-if="company.phone" class="list-inline-item"><i class="fa fa-phone" role="img" aria-label="Phone" title="Phone"/> <span t-field="company.phone"/></li>
+                    <li t-if="company.phone" class="list-inline-item"><i class="fa fa-phone" role="img" aria-label="Phone" title="Phone"/> <span class="o_force_ltr" t-field="company.phone"/></li>
                     <li t-if="company.email" class="list-inline-item"><i class="fa fa-at" role="img" aria-label="Email" title="Email"/> <span t-field="company.email"/></li>
                     <li t-if="company.website" class="list-inline-item"><i class="fa fa-globe" role="img" aria-label="Website" title="Website"/> <span t-field="company.website"/></li>
                     <li t-if="company.vat" class="list-inline-item"><i class="fa fa-building-o" role="img" aria-label="Fiscal number"/><t t-esc="company.country_id.vat_label or 'Tax ID'"/>: <span t-field="company.vat"/></li>
@@ -404,7 +404,7 @@
         <div t-attf-class="footer o_boxed_footer o_company_#{company.id}_layout">
             <div class="text-center">
                 <ul class="list-inline">
-                    <li t-if="company.phone" class="list-inline-item"><span t-field="company.phone"/></li>
+                    <li t-if="company.phone" class="list-inline-item"><span class="o_force_ltr" t-field="company.phone"/></li>
                     <li t-if="company.email" class="list-inline-item"><span t-field="company.email"/></li>
                     <li t-if="company.website" class="list-inline-item"><span t-field="company.website"/></li>
                     <li t-if="company.vat" class="list-inline-item"><t t-esc="company.country_id.vat_label or 'Tax ID'"/>: <span t-field="company.vat"/></li>
@@ -428,7 +428,7 @@
                     <ul class="list-unstyled">
                         <strong><li t-if="company.name"><span t-field="company.name"/></li></strong>
                         <li t-if="company.vat"><t t-esc="company.country_id.vat_label or 'Tax ID'"/>: <span t-field="company.vat"/></li>
-                        <li t-if="company.phone">Tel: <span t-field="company.phone"/></li>
+                        <li t-if="company.phone">Tel: <span class="o_force_ltr" t-field="company.phone"/></li>
                         <li t-if="company.email"><span t-field="company.email"/></li>
                         <li t-if="company.website"><span t-field="company.website"/></li>
                     </ul>
@@ -498,7 +498,7 @@
                 <ul class="list-inline mb4">
                     <!-- using the list-inline-item class from bootstrap causes weird behaviours in pdf report
                          adding d-inline class fixes the problem-->
-                    <li t-if="company.phone" class="list-inline-item d-inline"><span t-field="company.phone"/></li>
+                    <li t-if="company.phone" class="list-inline-item d-inline"><span class="o_force_ltr" t-field="company.phone"/></li>
                     <li t-if="company.email" class="list-inline-item d-inline"><span t-field="company.email"/></li>
                     <li t-if="company.website" class="list-inline-item d-inline"><span t-field="company.website"/></li>
                     <li t-if="company.vat" class="list-inline-item d-inline"><t t-esc="company.country_id.vat_label or 'Tax ID'"/>: <span t-field="company.vat"/></li>