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

Well-Known Member

Erel

B4X founder

xulihang

Well-Known Member

Erel

B4X founder

xulihang

Well-Known Member

Erel

B4X founder

xulihang

Well-Known Member

Erel

B4X founder

Similar Threads