javafx strange space characters in arabic

Question

Using the code below to write a javafx arabic textflow text to the screen produces strange characters, it appears that the space characters between the words are getting jumbled up. see screenshot below.

this issue only happens in my OS X sierra MacBook not on debian os. replacing the spaces with english spaces does not do anything.

Screenshot:

Code:

short_hadith = "  ‏.‏ قَالَ فَصِرْتُ إ          ِلَى الَّذِي قَ      صلى الله عليه وسلم   ‏.‏";
text1=new Text(sanad_0);
text1.setStyle("-fx-font-size: 59; -fx-fill: white; ");
text2=new Text( short_hadith + "\n");
text2.setStyle("-fx-font-size: 59; -fx-fill: goldenrod ; ");
text3=new Text(hadith_reference + "\n");
text3.setStyle("-fx-font-size: 25; -fx-fill: white; ");
text4 = new Text(ar_moon_notification + "\n");
text4.setStyle("-fx-font-size: 40; -fx-fill: white;  ");
text5 = new Text("يرجى ملاحظة أن هذا يقوم على حسابات التقويم");
text5.setStyle("-fx-font-size: 25; -fx-fill: white;  ");                
hadith_flow.setTextAlignment(TextAlignment.RIGHT);
hadith_flow.setStyle("-fx-line-spacing: 20px; fitToWidth: true;");      
hadith_flow.getChildren().addAll(text1, text2,text3, text4);

Answer 1

The problem in the font family. if it the default 'System', change it to any font family support the Arabic language like: 'Arial'.

you can add for all the project in CSS file like this : * { -fx-font-family: 'Arial'; }

I had the same problem and fix it.