B4J Question How to display text vertically

Discussion in 'B4J Questions' started by xulihang, Aug 26, 2019.

  1. xulihang

    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.
     
  2. Erel

    Erel Administrator Staff Member Licensed User

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

    xulihang Active Member Licensed User

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

    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: Aug 26, 2019
  5. xulihang

    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.

    Code:
    <!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
     
  6. Erel

    Erel Administrator Staff Member Licensed User

    This might help:
    Code:
    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:
    [​IMG]

    It will work better if you use a Chinese monospace font.
     
    Kope and xulihang like this.
  7. xulihang

    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
     
    Erel likes this.
  8. Erel

    Erel Administrator Staff Member Licensed User

    Good catch.
     
Loading...
  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice