In some paragraphs, which are written in Hebrew (RTL) and text align is set to justify, spaces WITHIN words are added (see attached screenshot as an example โ red triangles mark the space added). This makes the text look obscured and not easy to read.
I didnโt find any common denominator between all paragraphs that have the same issue.
Retyping the text didnโt solve the issue.
Setting text align via CSS (instead of Style > Typography > Text align) didnโt solve the issue.
I believe this is not caused by Bricks itself. Will wait by marking this topic as no-bug, but Iโm quite sure itโs not related to Bricks.
Can you try the same with the default theme, or even with some online editor? Iโm sure you will get the same/similar results if you use the same paragraph width.
Additionally, I could try it, but I donโt know how to read, even less how to write in Hebrew/RTL.
Thanks for your reply.
I believe that itโs caused by Bricks. Iโm currently moving my website from Elementor Pro to Bricks (rebuilding it). Iโm using the same version of WordPress in both websites. I donโt have this kind of problem in the Elementor website, only in Bricks
Thatโs the usual and expected result when using justified text: itโs unpredictable. It has to add space between the words, otherwise the text wouldnโt be justified. Unfortunately Iโm not able to read Hebrew, so I canโt tell how it should look like, but I believe the result would be exactly the same in pure HTML/CSS or Elementor within the exact same conditions (widths, font-size, etc).
Long story short: Itโs not advisable to use text-align: justify on the web. Even in programs such as InDesign, justified text has to be balanced manually from time to time, as it does not always work depending on the width, content, font, font size, and letter-spacing. The difference, however, is that the layout does not adapt - it always remains the same, which isnโt the case for a website.
Unfortunately, we canโt say anything more about it without a live link and/or a comparison to e.g. a codepen or an elementor site that uses the exact same setup.
This link is for a post on my staging website (built with Bricks). Please take a look at the excerpt and at the 4th line bellow the first h2 heading. There are spaces within words.
This link is for the same post (there are some minor differences) on my live website (built with Elementor). If youโll look at the excerpt and 4th line bellow the first heading, youโll see that they look different than same lines in the first link (there are not spaces within words).
This is just one example.
I truly hope that this will help you to get a better understanding of the issue.
In any case, thank you in advance for your support.
The issue is caused by the combination of these two factors:
(1) Using Googleโs font Rubik as a custom font
(2) Disabling Google Fonts (Bricks settings > Performance)
When one of these factors is removed (either using another font or enabling Google Fonts) the phenomena of spaces added between letters in the same word do no longer exists.
I canโt tell if there is some problem with the Rubik font, or in the way Bricks saved the font as a custom font.
