For some east Asian languages such as Chinese, we don't use thousands/grouping separators. Instead, a user-friendly app displays a little triangle that follows the max place or the leading place the number and display a max place digit such as 百(hundred 100) 千(thousand 1000) 万(myriad 10000) 十万(lakh 100,000), etc, see the Baidu link.
I am trying to build such a max place indicator with React and custom form control to use it with Form.Item, but I can't quite coax the indicator to precisely follow the max digit. It works alright for 1,000, 10,000, and 100,000, but as you put a bigger number in there, the triangle starts drifting away.
My current approach can be accessed via codesandbox here
I attempt to calculate the width of the input string by accessing the calculated style of the input value, create a hidden div on the page with the calculated style and input value. Offset the triangle indicator by its style.left. This doesn't seem to behave well when I decrease the viewport size, and when font is not the default sans-serif.
If you have a better approach to recommend, would you please kindly shed some light to enlighten me?
question from:
https://stackoverflow.com/questions/65650426/how-to-build-an-accurate-max-place-indicator-making-the-triagle-follow-the-max 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…