B4J Question How to display text vertically

xulihang · Aug 26, 2019

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.

Is there a way to do this in B4J?

Thanks.

Erel · Aug 26, 2019

How does the original string in the code will look like in this case?

xulihang · Aug 26, 2019

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

Erel · Aug 26, 2019

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?

xulihang · Aug 26, 2019

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.

Erel · Aug 26, 2019

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 · Aug 26, 2019

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

Erel · Aug 26, 2019

xulihang said:
I set the alignment to center_right and it looks good.

Good catch.

B4J Question How to display text vertically

xulihang

Active Member

Erel

B4X founder

xulihang

Active Member

Erel

B4X founder

xulihang

Active Member

Erel

B4X founder

xulihang

Active Member

Erel

B4X founder

Similar Threads