Hello,
I’m using Unity UI Toolkit since 2021, for commercial projects. And it’s still complicated to easily manipulate text elements. Many features from TMP aren’t in the UITK system, which is hard to switch from UGUI.
One of the most important feature for projects is the text-transform property. A post from 2022 was already talking about this and was totally forgotten in the limbs of ancient Unity Forum.
What is text-transform?
Following the mdn documentation, the text-transform property allows the text to be uppercased, lowercased or capitalized without doing any manipulation from code, nor text input (from SO or Localization file).
This way, with the same text, you can get 4 different versions. It is also very simple to use in HTML:
<p style="text-transform: uppercase">Hello</p>
This feature already exists in TextMeshPro, which is included in Unity, under the “Font Style” property.
Why is it so important?
For many use cases, if I want to enforce uppercase/lowercase on displayed text, I need to do that from code. When retrieving my text, I need to do that:
public class MyView : MonoBehaviour
{
[SerializeField]
private UIDocument _uiDocument;
public string MyText = "Hello";
public void Start()
{
var root = _uiDocument.rootVisualElement;
root.Q<Label>().text = MyText.ToUpper();
}
}
It is hard-coded to be uppercased. And if the UI designer or the integrator needs to change this, it has to change the code itself. Also, if we define an entire design system (like a header .h1) to always be uppercased, I will have to add the ToUpper() call to every text that will be .h1. Okay… what if, after doing that, the UI design finds the uppercase too much aggressive and wants to enforce the lowercase?
In USS, it would have been only one line to change… In a big UI project, where texts are modified only in code, it is huge.
Another use case: I have a resource in my game called “gold”. It always has the same name, but can be translated. I will not make a translation for every “case” an entry line could be.
| Key | Normal | Uppercased | Lowercased | Capitalized |
|---|---|---|---|---|
| gold | gold | GOLD | gold | Gold |
| money | money | MONEY | money | Money |
| etc… |
I would make the translations files bigger, mainly if I have to do that for every language. Anyway, it is simplier to have one localization and then alter its “text-transform” from an USS property.
What am I currently using?
I said I’m using UITK since 2021 ; I’m messing around to find easy solutions. The simplest solution is to use the .ToUpper() and .ToLower() methods for EACH text entry.
But another solution I tried, to help integrators, is to create custom control that can use the text-transform as a parameter. In Unity 6, it could be:
using UnityEngine.UIElements;
public enum TextTransform
{
None,
Lowercase,
Uppercase,
Capitalize
}
[UxmlElement("Label")]
public partial class LabelModified : Label
{
[UxmlAttribute] public TextTransform TextTransform;
private string _text;
public override string text
{
get =>
TextTransform switch
{
TextTransform.Lowercase => _text.ToLower(),
TextTransform.Uppercase => _text.ToUpper(),
TextTransform.Capitalize => _text.ToCapitalize(), // custom extension method
_ => _text
};
set
{
((INotifyValueChanged<string>) this).value = value;
_text = value;
}
}
}
But this solution only works for labels, not every text elements (button is a text element in UITK and, thus, can’t use the upper code to get the text-transform feature. You need to create a custom button control that use it so)
How could it works?
User-side, it would be quite simple. You add the text-transform property in USS :
.unity-label {
text-transform: [none|uppercase|lowercase|capitalize];
}
Thank you for ready this post. I’ve tried to make this as simple as I can to make sure Unity teams understand how important this feature is, and why I’m asking to add it.