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.



Is there a way to do this in B4J?

Thanks.
 
Sort by date Sort by votes

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.
 
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:


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.

 
Upvote 0
You must log in or register to reply here.

Similar Threads

  • Question
B4J Question [B4XPages] Multiline textview - vertical scroll position
Replies
3
Views
1K
Erel
  • Question
iOS Question [B4X] WebView - Zoom and maintain upper left corner.
Replies
3
Views
1K
MrKim
  • Article
B4J Library Vertical Text Engine
Replies
0
Views
1K
xulihang
  • Question
Android Question Vertical "[B4X] [XUI] AnotherProgressBar"
Replies
4
Views
2K
Erel
  • Question
B4J Question How to enable horizontal scrollbar in Webview
Replies
5
Views
2K
ThRuST
Menu
Log in
Register
Cookies are required to use this site. You must accept them to continue using the site. Learn more…