I try to display 2 texts side by side: an original text and its translation. The original is in vertical right to left writing mode and the translation in horizontal left to right. The goal is to make a nice display on a screen with vertical scrolling, so it means the original text, after reaching the box limit, must continue under and not overflow (on translation or outside the page).
Some time ago, I thought I found the solution with column-count property (set to 1 or 2), but it seems the nice display was an artefact rather than the desired behaviour, as I noticed when several groups of 2 texts were following: if the original text is longer than its translation, it is hidden or overlaps over the next text under, and it seems it is because only the content of translation is taken into account for length calculation (as it can be seen with borders).
I made a minimal working example to show the problem. The desired behaviour must seem like when you put column-count: 1 (or 2) for .original rather than auto, but without overflow, and in this setting, you see that it is an artefact because the content overflows the border!
Edit: I just made a JSFiddle test to show it better.
Edit2: To show it even better, I attached an html file: MWE.zip
I read several times the point about orthogonal flow in the CSS documentation, and I can’t reproduce what is shown on this picture for my right side. Did I miss something?
Because it is said below that
The automatic triggering of multi-column flow is at-risk and may be dropped during CR.
Maybe it is not implemented yet…
For information, I use latest Firefox version, and the (bad) result is the same with Chromium.
Hello,
My problem seems closely related to this point.
I try to display 2 texts side by side: an original text and its translation. The original is in vertical right to left writing mode and the translation in horizontal left to right. The goal is to make a nice display on a screen with vertical scrolling, so it means the original text, after reaching the box limit, must continue under and not overflow (on translation or outside the page).
Some time ago, I thought I found the solution with
column-count
property (set to 1 or 2), but it seems the nice display was an artefact rather than the desired behaviour, as I noticed when several groups of 2 texts were following: if the original text is longer than its translation, it is hidden or overlaps over the next text under, and it seems it is because only the content of translation is taken into account for length calculation (as it can be seen with borders).I made a minimal working example to show the problem. The desired behaviour must seem like when you put
column-count: 1 (or 2)
for.original
rather thanauto
, but without overflow, and in this setting, you see that it is an artefact because the content overflows the border!Edit: I just made a JSFiddle test to show it better.
Edit2: To show it even better, I attached an html file: MWE.zip
I read several times the point about orthogonal flow in the CSS documentation, and I can’t reproduce what is shown on this picture for my right side. Did I miss something?
Because it is said below that
Maybe it is not implemented yet…
For information, I use latest Firefox version, and the (bad) result is the same with Chromium.
Thank you for your help.
Sincerely.