# Linked Text in UGUI Layout Groups

**URL:** https://discussions.unity.com/t/linked-text-in-ugui-layout-groups/664997
**Category:** UGUI
**Tags:** UGUI, TextMesh-Pro
**Created:** [May 17, 2017, 8:50pm UTC](https://discussions.unity.com/t/linked-text-in-ugui-layout-groups/664997 "2017-05-17T20:50:40Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![Alchemy\_Fire](https://avatars.discourse-cdn.com/v4/letter/a/a8b319/32.png) [@Alchemy\_Fire](https://discussions.unity.com/u/Alchemy_Fire)
#### Post date: [May 17, 2017, 8:50pm UTC](https://discussions.unity.com/t/linked-text-in-ugui-layout-groups/664997/1 "2017-05-17T20:50:40Z")

</div>

Hi,

I have a UI control that displays text and images inside a scroll rect. The text and images are organised as a gameobject per paragraph / image and are under the control of a vertical layout group / combo size fitter on the scroll rect content panel.

The content is dynamic.

I’m trying to add a dropcap to the first paragraph. To do this I create a normal UGUI text component for the drop cap and a TMP UGUI component for the text that border the drop cap to the right. These two objects share a common parent that has a layout element with a height equal to that of the dropcap (see pic: #1). I then create another object with a TMP UGUI component and I set the first component overflow mode to ‘Linked’ and point it at the second component (#2).

**This works BUT the second TMP UGUI is too large**. I think it’s calculating its size based on the text of the original source component. If I add another non linked object with TMP UGUI component then it sizes its self correctly (#3).

Am I doing something wrong or is this just a limitation of linked overflow mode? If it is a limitation, any ideas on how to implement drop caps with dynamic text in a layout group?

 ![3073924--231171--DropCap_Issue.png](https://europe1.discourse-cdn.com/unity/original/3X/7/6/761f3c406f7b8d3631c5be506fc1f8904600bad3.png)

---

<div class="post-metadata">

### Author: ![Stephan\_B](https://avatars.discourse-cdn.com/v4/letter/s/85e7bf/32.png) [@Stephan\_B](https://discussions.unity.com/u/Stephan_B)
#### Post date: [May 17, 2017, 10:38pm UTC](https://discussions.unity.com/t/linked-text-in-ugui-layout-groups/664997/2 "2017-05-17T22:38:25Z")

</div>

It is likely using the size from the source text.

Can you provide me with a simple Repro scene that I can use for testing. Make sure the exported package only includes the scene and potential dependency like an image. Ie. don’t include all of TextMesh Pro 🙂

As soon as I have a chance, I’ll take a look at it.

Here is an alternative way to do drop cap. [http://digitalnativestudios.com/forum/index.php?topic=582.msg6840#msg6840](http://digitalnativestudios.com/forum/index.php?topic=582.msg6840#msg6840)

---

<div class="post-metadata">

### Author: ![Alchemy\_Fire](https://avatars.discourse-cdn.com/v4/letter/a/a8b319/32.png) [@Alchemy\_Fire](https://discussions.unity.com/u/Alchemy_Fire)
#### Post date: [May 18, 2017, 3:58pm UTC](https://discussions.unity.com/t/linked-text-in-ugui-layout-groups/664997/3 "2017-05-18T15:58:41Z")

</div>

Thanks Stephan, appreciate the reply.

> [@](#):
>
> Can you provide me with a simple Repro scene that I can use for testing. Make sure the exported package only includes the scene and potential dependency like an image. Ie. don’t include all of TextMesh Pro 🙂

Attached is very minimal repo.

> [@](#):
>
> Here is an alternative way to do drop cap. [http://digitalnativestudios.com/forum/index.php?topic=582.msg6840#msg6840](http://digitalnativestudios.com/forum/index.php?topic=582.msg6840#msg6840)

Unfortunately this won’t work in my case because the text is dynamic so I need a way to work out where to stop the indentation. Fortunately I was able to cobble something together by forcing a layout update and then using **firstOverflowCharacterIndex** on TMP\_Text to do the linking myself. In case this helps anyone I have included some sample code and example gif below.

```csharp
using UnityEngine;
using UnityEngine.UI;
using TMPro;

[ExecuteInEditMode]
public class DropCapParagraph : MonoBehaviour
{
    public Text DropCap;
    public TextMeshProUGUI RightText;
    public TextMeshProUGUI BelowText;
    [TextArea(5, 3), SerializeField] private string paragraph;
   
    private char dropCapChar;
    private string textStr;

    private bool valid
    {
        get { return paragraph != null && paragraph.Length > 0 && DropCap && RightText && BelowText; }
    }

    public string Paragraph
    {
        get { return paragraph; }
        set {
            paragraph = value;
            distributeParagraphText();
        }
    }

    // Check to see if the RightText component is overflowing - if so split the text between RightText and BelowText based on the
    // overflow charadcter index.
    private void distributeParagraphText()
    {
        if (!valid)
            return;

        // Assign the 1st char of paragraph to the dropcap component and the rest of the paragraph to the 'RightText' component.
        dropCapChar = paragraph.ToCharArray()[0];
        DropCap.text = dropCapChar.ToString();
        textStr = paragraph.Substring(1, paragraph.Length - 1);
        RightText.text = textStr;

        // This call causes the RightText TextMeshProUGUI component to do some form of layout which make 'isTextOverflowing' /
        // 'firstOverflowCharacterIndex' consistent with the text assigned above.
        RightText.Rebuild(CanvasUpdate.PreRender);

        if (RightText.isTextOverflowing)
        {
            var txt = RightText.text;
            var idx = RightText.firstOverflowCharacterIndex;
            RightText.text = txt.Substring(0, idx - 1);
            BelowText.text = idx >= txt.Length ? "" : txt.Substring(idx);
        }
        else
            BelowText.text = "";
    }

    private void OnEnable()
    {
        if (valid)
        {
            // RightText needs to be in Overflow mode for 'isTextOverflowing' / 'firstOverflowCharacterIndex' to work.
            RightText.overflowMode = TextOverflowModes.Overflow;
            BelowText.overflowMode = TextOverflowModes.Overflow;
            distributeParagraphText();
        }
    }

    private void Start ()
    {
        distributeParagraphText();
    }

    private void OnValidate()
    {
        distributeParagraphText();
    }
}

```

![3074981--231356--DropCap_Example_Working.gif](https://europe1.discourse-cdn.com/unity/original/3X/e/8/e805bd437b42b5a09c1747c3bdff1909030afc0f.gif)

[3074981–231350–LinkedTextLayoutIssue.unitypackage](https://discussions.unity.com/uploads/short-url/QPyeEhE4HL738S0B35f3meH6dy.unitypacka) (9.48 KB)

---

<div class="post-metadata">

### Author: ![RobBrooks](https://dub1.discourse-cdn.com/unity/user_avatar/discussions.unity.com/robbrooks/32/399925_2.png) [@RobBrooks](https://discussions.unity.com/u/RobBrooks)
#### Post date: [September 29, 2020, 4:59pm UTC](https://discussions.unity.com/t/linked-text-in-ugui-layout-groups/664997/4 "2020-09-29T16:59:43Z")

</div>

Exactly this problem.  
Many thanks for the fix.

---

<div class="post-metadata">

### Author: ![bluefairymediallc](https://avatars.discourse-cdn.com/v4/letter/b/ee7513/32.png) [@bluefairymediallc](https://discussions.unity.com/u/bluefairymediallc)
#### Post date: [June 8, 2022, 4:52am UTC](https://discussions.unity.com/t/linked-text-in-ugui-layout-groups/664997/5 "2022-06-08T04:52:27Z")

</div>

Same issue for me, except the second textbox gets its height set to 0 instead of being too large. Not always, though–it seems to depend on the actual text. It wraps nicely for four to five blocks of lorem ipsum but not for my dynamically populated text where paragraph size varies.

I’ll have to try Alchemy\_Fire’s solution later.
