BreezingFoms / FacileForms

Problem

Wer eine Seite außerdem in arabischer Sprache realisieren und dabei Formulare per BreezingForms anbieten will, wird vor dem Problem stehen, dass die Rechts-zu-Links-Orientierung (rtl-direction) nicht einfach umsetzbar ist. Leider bietet BF hierfür keine Parametierung und unkomfortablerweise sind die Feld-Labels direkt im Element selbst über Styles formartiert - einschließlich einem float:left im Label Element .ff-label. In irgendwelchen CSS-Files also Anweisungen unterzubringen, funktionieren selbst mit einem !important nicht.

Lösung

Unser Ziel besteht darin, im Fall einer arabischen Sprache also bei rtl-direction das Label rechts vom Formularfeld anzuordnen, was üblich über ein float:right erreicht wird. Diese Styleanweisung muss dem Selector .ff-label zugewiesen werden.

BF bettet vor dem Formular eine Style-Block ein. Dieser wird, ja leider, direkt im Core-Script components/com_facileforms/facileforms.process.php hart codiert erzeugt (ca. Zeile 2914). Hier müssen wir eingreifen.

Zunächst brauchen wir die Information, ob wir eine Sprache mit notwendiger RTL-Orientierung haben. Das machen wir am Anfang des des Scriptes und stellen uns diese Info als Konstante RTL zur Verfügung:

15
16
17

$lang = JLanguage::getInstance( $locale );
$mosConfig_lang = $lang->getBackwardLang();
define('RTL', $lang->_metadata['rtl']);

Dann modifizieren wir die Style-Sheet-Block-Ausgabe durch Einfügungen. Wir nutzen hierfür eine neue Variable $floatRight:

2908
2909
2910
2911
2912
2913
2914
2915
2916
2917
2918
2919

} else { // case of forms done with the easy mode
 $floatRight = ( RTL ) ? 'float:right !important; ' : '';
 echo '
 <style type="text/css">
 ul.droppableArea, ul.droppableArea li { background-image: none; list-style: none; '.$floatRight.' }
 li.ff_listItem { width: auto; list-style: none; }
 li.ff_listItem .ff_div { width: auto; float: left; }
 .ff_label { '.$floatRight.' outline: none; }
 .ff_elem { float: left; }
 .ff_dragBox { display: none; }
 </style>
 ';

Im Ergebnis dieser Modifikationen erscheint im Formular-Quelltext dann folgendes für den Fall einer RTL-Direction. Wir haben dann hier unser float:right !important:

ul.droppableArea, ul.droppableArea li { background-image: none; list-style: none; float:right !important; }
li.ff_listItem { width: auto; list-style: none; }
li.ff_listItem .ff_div { width: auto; float: left; }
.ff_label { float:right !important; outline: none; }
.ff_elem { float: left; }
.ff_dragBox { display: none; }

Hier ist ein Beispiel zu sehen, wie ein solches Formular dann korrekt arabisch formatiert ist: www.optimess.com.