B4J Question How to display text vertically

xulihang

Active Member
Licensed User
Hi there,

I want to display Chinese/Japanese text vertically as this is a way of reading text.

In css, there is the writing-mode attribute. When it is set as vertical-rl, the text will be vertical and start from the right.

vertical_text.JPG


Is there a way to do this in B4J?

Thanks.
 

Erel

Administrator
Staff member
Licensed User
How does the original string in the code will look like in this case?
 

xulihang

Active Member
Licensed User
It's the same as it is displayed in the horizontal way, like 我家没有电脑 in the example picture.
 

Erel

Administrator
Staff member
Licensed User
There is no built-in support for this in JavaFX.

The height is set to 5 letters?

How will it look if there are 12 characters?
 
Last edited:

xulihang

Active Member
Licensed User
This depends on the container's height. Changing the height of the span element in the html file below, the text will wrap itself.

B4X:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<style>
span {
  writing-mode: vertical-rl;
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: vertical-rl;
}
</style>
</head>
<body>

<span>我家没有电脑。我家也没有冰箱。</span>

</body>
</html>
In Japanese manga(comics), the text exists in balloons where the height is limited.
panel.png
 

Erel

Administrator
Staff member
Licensed User
This might help:
B4X:
Sub AppStart (Form1 As Form, Args() As String)
   MainForm = Form1
   MainForm.RootPane.LoadLayout("1") 'Load the layout file.
   MainForm.Show
   Label1.Text = MakeItVertical("我家没有电脑。我家也没有冰箱。", 5)
End Sub


Sub MakeItVertical(s As String, NumberOfLettersPerColumn As Int) As String
   Dim NumberOfColumns As Int = Ceil(s.Length / NumberOfLettersPerColumn)
   Dim sb As StringBuilder
   sb.Initialize
   For y = 0 To NumberOfLettersPerColumn - 1
       For x = 0 To NumberOfColumns - 1
           Dim Index As Int = (NumberOfColumns - 1 - x) * NumberOfLettersPerColumn + y
           If Index < s.Length Then
               sb.Append(s.CharAt(Index))
           Else
               sb.Append(" ")
           End If
       Next
       sb.Append(CRLF)
   Next
   Return sb.ToString
End Sub
The result is:


It will work better if you use a Chinese monospace font.
 

xulihang

Active Member
Licensed User
Thanks, Erel. This is a feasible workaround. I set the alignment to center_right and it looks good.

panel.png
 
Top