B4J Question How to display text vertically

xulihang

Active Member
Licensed User
Longtime 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.
 

xulihang

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

xulihang

Active Member
Licensed User
Longtime 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
 
Upvote 0

Erel

B4X founder
Staff member
Licensed User
Longtime 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:
java_kWjTjh0d74.png


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

xulihang

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

panel.png
 
Upvote 0
Top