The Japanese text is displayed strangely

[junogura]

The Japanese text is displayed strangely.

code:

window('こんにちは') {
  area {
    text {
      string("こんにちは\n") {
        font family: 'Osaka', size: 20
        color :white
      }
      string("おはようございます。\n") {
        font family: 'ヒラギノ角ゴシック', size: 20
        color :white
      }
      string("おはようございます。\n") {
        font family: 'Arial', size: 20
        color :white
      }
    }
  }
}.show

screenshot:

ruby 3.3.5 on macOS 14.6.1

[AndyObtiva]

@kojix2 you have used Glimmer DSL for LibUI in Japanese, so you might know how to handle this issue. If there is an issue to report to the upstream project libui-ng, could you please report it?

BTW, I confirm the issue locally (Ruby 3.2.2 on MacBook Pro M2 Chip and MacOS Sonoma 14.5). What is happening is the text in every string (attributed string) is getting split into two parts of text. The first part of the text is showing up normally according to the font and color of the attributed string. The second part of the text is showing up as black (default color) and in a different front (default font). It seems like the attributed string is not getting processed for the full String argument that is passed in for some reason. This might be a bug in libui-ng in Japanese.

[junogura]

I see. I will do that.

[AndyObtiva]

Actually, I was talking to @kojix2 because he’s Japanese too. He built the LibUI Ruby binding that is utilized by Glimmer DSL for LibUI. We might run a few tests and verifications first before reporting to libui-ng (the C library utilized by Glimmer DSL for LibUI).

So, you don’t need to do anything for now @junogura

[kojix2]

Hello Andy and Ogura,

I tested this issue. At first, I thought it was a problem specific to macOS, but the same issue happened on Ubuntu.
Then, I considered that the problem might be with Glimmer DSL for LibUI.
However, the same problem occurred with a C language code that does the same thing.
I also found that the issue happens in many non-alphabet languages, not just Japanese.

Is this a serious bug?
I found it might not be. The documentation for ui.h says the following:

// uiAttributedStringSetAttribute() sets an attribute in the byte range [start, end)
// of the string s. Any existing attributes in that byte range of the same type are
// removed. The string s takes ownership of the attribute a; you should not use it after
// uiAttributedStringSetAttribute() returns.
_UI_EXTERN void uiAttributedStringSetAttribute(uiAttributedString *s, uiAttribute *a, size_t start, size_t end);

uiAttributedStringSetAttribute() sets an attribute in the byte range [start, end) of the string s.

That is, this function takes a byte range as an argument, not the index when the string is viewed as an array. In some languages, the number of characters does not match the byte range because some characters use more than one byte, especially in languages with multi-byte encodings like UTF-8.

I think this could be the reason for the issue.

To resolve this issue, could we consider using the string.bytesize method instead of string.size for the AttributedString ?

https://ruby-doc.org/3.3.5/String.html#method-i-bytesize

[kojix2]

Fork the repository, then

git clone https://github.com/your_name/glimmer-dsl-libui
ruby -pi -e 'gsub("@string.size", "@string.bytesize")' glimmer-dsl-libui/lib/glimmer/libui/attributed_string.rb
cd glimmer-dsl-libui
git checkout -b bytesize
git add .
git commit -m "Use `bytesize` instead of `size` for attributed setting"
git push origin bytesize

Then create a pull request. Not sure if this is enough :man_shrugging:

[junogura]

I tried that chage. It looks good.

But, I couldn't push changes. I don't have permission to do this.

» git push origin bytesize ERROR: Permission to AndyObtiva/glimmer-dsl-libui.git denied to junogura. fatal: Could not read from remote repository.

[kojix2]

@junogura You will need to fork the repository first.

If you are not familiar with GitHub and would like to read the Japanese explanation, the following blog post will be helpful. 【超図解】OSSにPull Requestを出す時の備忘録

---

If you want to reuse an existing directory, you can also use the following command. However, if this is your first time creating a pull request on GitHub, you may learn more by starting over with Fork → Clone → Edit → Commit → Push → PR.

cd glimmer-dsl-libui
git remote set-url origin https://github.com/junogura/glimmer-dsl-libui
git remote add upstream https://github.com/AndyObtiva/glimmer-dsl-libui
git push origin your_branch_name # Push to your forked remote repository not upstream one

[junogura]

I did it. I have used github only personally untill now.

[AndyObtiva]

@junogura Thanks a lot for the fix in PR #68! It makes total sense as to why the bug happened. I will test it and merge the code as soon as I have a chance.

[AndyObtiva]

@junogura the fix has been tested and released in glimmer-dsl-libui gem version 0.12.4: https://rubygems.org/gems/glimmer-dsl-libui/versions/0.12.4

Thank you for the PR.

[kojix2]

git commit -m "Use bytesize instead of size for attributed setting"

Maybe the commit message should have been "attribute setting" or "attributed string" instead. My bad. Just demonstrating that it's okay if you're not great at English when contributing to OSS. :sweat_smile:

[AndyObtiva]

Maybe the commit message should have been "attribute setting" or "attributed string" instead. My bad. Just demonstrating that it's okay if you're not great at English when contributing to OSS. 😅

No big deal. I just reworded the commit to attributed string while keeping the original author name on it.

https://github.com/AndyObtiva/glimmer-dsl-libui/commit/06ac9d41ca159fc8e28b2342899990ca20f7fc16