Search Unity

Question TextMesh Pro UGUI overlapping after the first period '.' in a sentence

Discussion in 'UGUI & TextMesh Pro' started by danosono, Nov 19, 2022.

  1. danosono

    danosono

    Joined:
    Jan 22, 2019
    Posts:
    45
    Text overlaps on Linux and WebGL builds but not windows.

    For WebGL (you can play it below), after the first period, the next sentence starts on the same line (overlapping) with left justification as if there were no text already there AND the space and other characters after this first period are not recognized (seemingly) by the game when they are typed. I found a verse that does not have a period for a long number of characters and the rule held true there (the overlapping happened on that line further down the page that usual.

    Windows - works normally (free) : https://store.steampowered.com/app/2151420/Word/
    WebGL - the error can be seen here - (free): https://simmer.io/@danosono/~a23c116c-f356-16de-43f8-bc1ed6265e5d
    Linux - I sent it to a friend who reports findings same as WebGL; I don't use Linux OO

    Any ideas as to why this is happening?
     

    Attached Files:

  2. danosono

    danosono

    Joined:
    Jan 22, 2019
    Posts:
    45
    Reading through the threads, I see that TMP UI and TMP should not be in the same scene with the same material; does this refer to the Material Preset directly under Font Asset (Eg Bodo Amat SDF Material) ?

    I did find a handful of "Better TextMeshPro Text" components all in one menu. It is Better UI and you right click a component and choose "Make Better." I use Better UI for buttons b/c it has events based on Selected, highlighted, etc (same as OnClick). Making the TMP UI "Better" was an accident except for two cases and I can change the material in these instances if need be.

    https://assetstore.unity.com/packages/tools/gui/better-ui-79031
     
  3. danosono

    danosono

    Joined:
    Jan 22, 2019
    Posts:
    45
    So I went through and made sure all text that was not "TextMeshPro - Text (UI)" had a unique Material Preset (directly under Font Asset. Build to WebGL (no improvement) and Linux (have not heard back from tester).
     
  4. Stephan_B

    Stephan_B

    Joined:
    Feb 26, 2017
    Posts:
    6,595
    Based on the image above, this is most likely due to a hidden <CR> Carriage Return contained in the text.

    Check if your text contains hidden <CR> Carriage Return which is char(13).

    Typically lines end with a <LF> Linefeed but on some platforms lines are ended with <CR><LF> where if for some reason the <LF> was missing, the text would overwrite the text on that same line.

    <CR> Carriage return instructs the text layout to resume at the start of the line.
     
  5. danosono

    danosono

    Joined:
    Jan 22, 2019
    Posts:
    45
    Thanks so much Stephan,

    Below is what I am doing currently; looking into what you said.

    upload_2022-11-22_18-43-26.png
     
  6. danosono

    danosono

    Joined:
    Jan 22, 2019
    Posts:
    45
    Thanks!

    Fixed it by adding .Replace("\n", "").Replace("\r", "");
    Should I remove the .Replace(System.Environment.Newline now? It is there and comes before the \n and \r and does not seem to be causing trouble.

    So this is a bug with my game not with Unity or TextMeshPro; although it did work normally in Windows.

    Linux seems to be fixed!!

    As for WebGL,

    BEFORE YOU READ THE BELOW, I am content to stop here b/c there may be other WebGL issues and the game was really not intended for WebGL so, beyond this point, any work would be to help others in a similar situation or just for learning; if any direction is given here as to fixing the WebGL version, I will attempt it and report the results. No worries either way.

    Played it through on WebGL and the game detects an incorrect character entered (error) after the first period (same location as last bug) and then, there is an error for every character afterward - even if it is correct.

    I logged each occurrence of the string (image below) and they are identical. First is the result of the .Replace() action, the second is the semitransparent text and the third is the text revealed as the player types.

    upload_2022-11-22_19-54-47.png

    Link to updated game:
    https://simmer.io/@danosono/~a23c116c-f356-16de-43f8-bc1ed6265e5d

    I will keep looking at the character after the first period; it looks normal in notepad and notepad++

    Copied this from the Debug.Log:
    In the beginning, God created the heavens and the earth. The earth was formless and empty. Darkness was on the surface of the deep and God's Spirit was hovering over the surface of the waters.
     

    Attached Files:

    Last edited: Nov 23, 2022
  7. danosono

    danosono

    Joined:
    Jan 22, 2019
    Posts:
    45
    ANDROID

    I am now building the same game for android and am encountering the same overlapping problem. This again, from the behavior, acts like the CR is called but no LF. I remove all CR LF so Android should treat it as a single string.

    It looks normal in the editor and in windows and in linux.

    Example:
    The following text:

    Acts 3:3 Seeing Peter and John about to go into the temple, he asked to receive gifts for the needy.
    Acts 3:4 Peter, fastening his eyes on him, with John, said, “Look at us.”

    Has .Replace() applied:

    playString = playString
    .Replace(currentBookName + " " + currentChapterNumber + ":" + beginningVerse + " ", "")
    .Replace(currentBookName + " " + currentChapterNumber + ":" + endingVerse, "")
    .Replace("¶ ", "").Replace(System.Environment.NewLine, "").Replace(" ", " ")
    .Replace("’","'").Replace("“",@"""").Replace("”",@"""").Replace("‘","'")
    .Replace("–","-").Replace("—","-").Replace("\r", "").Replace("\n","");

    With the result:

    Seeing Peter and John about to go into the temple, he asked to receive gifts for the needy. Peter, fastening his eyes on him, with John, said, "Look at us."

    on Android, it looks like this

    upload_2023-6-30_7-11-52.png

    in Unity Editor, Windows and linux, - looks like this:

    upload_2023-6-30_7-12-23.png

    Any ideas as to what is happening and/or how to correct it?
     
  8. danosono

    danosono

    Joined:
    Jan 22, 2019
    Posts:
    45
    I Debug.Log()'d them before and after .Replace()
    Here they are in Notepad++ with similar width restrictions for the final string.
    Lines 10 and 11 are before .Replace() and line 12 is after.
    upload_2023-6-30_7-23-18.png
     
    Last edited: Jul 1, 2023
  9. danosono

    danosono

    Joined:
    Jan 22, 2019
    Posts:
    45
    For anyone reading this ...

    It is working now fsr.

    I did just add the .Replace("\r", ""); recently . Not sure why it didn't work right the first build after that.