Add overflow indicator to text


Steve Mills
 

On Nov 9, 2017, at 13:39:20, Alex Zavatone <zav@mac.com> wrote:

myLabel.lineBreakMode = NSLineBreakByTruncatingTail;
I'm not sure where my brain was, but I totally blanked this out and was too focused on trying to roll my own. This works just fine in my scenario, even when oddly shaped exclusionPaths are applied. The only time it doesn't work is when I have a rotation xform applied to the UITextView - the truncation ellipsis doesn't appear.

--
Steve Mills
Drummer, Mac geek


Steve Mills
 

Thanks for the input, everyone. I mentioned that exclusionPaths are used, so the text flows inside arbitrary shapes, mostly comic book balloon type blobs. As such, there's rarely a straight bottom edge, straight right edge, or bottom-right corner. So it seems like the best place is to put the marker after the last visible character. If that happens to be outside the bounds of the parent view, I'll try putting it below the last visible char. And if that happens ti be outside the bottom of the parent view, float it over the last visible char. At that point, it doesn't matter of it obscures the char, since it's overflowed and the user needs to choose a smaller text size.

Years ago I worked for MultiAd. Our page layout app Creator put a fat, red ellipsis below the bottom edge of an overflowed text box when editing was active, and above the bottom edge when it was inactive. While active, it double as a button that allowed the user to add a new text block in sequence. When it didn't look right was when the text block was in a non-rectangular shape, like a right triangle whose right angle is at the top-left, so the marker was left floating in space. Which is why it makes sense for it to be near the last visible char, especially since the app I'm working on now is only a viewer, not an editor.

Thanks for talking through it with me.

--
Steve Mills
Drummer, Mac geek


Graham Cox
 



This is what we do in a drawing app, which works well for us. When the text box is selected, it shows the + symbol as part of the frame. If not selected that’s not visible, so the text itself isn’t modified by not fitting. If you have some sort of highlighting or frame around the text, something like this could work for you.

To detect whether this is drawn or not, we ask the layout manager of the text system for the -glyphRangeForTextContainer:, and compare it to the -glyphRangeForCharacterRange: for the entire text. The symbol is displayed when they are unequal. This is simple and reliable, though NSLayoutManagerDelegate has -layoutManager:didCompleteLayoutForTextContainer:atEnd: where the atEnd: part tells you whether it completed the job. 

—Graham



On 10 Nov 2017, at 4:41 am, Steve Mills <sjmills@...> wrote:

I'm using NSTextContainer with exclusionPaths, NSLayoutManager, and UITextView for rendering text into balloons, and the user can control the font size. When overflow occurs, I'd like to show an indicator. Just looking for thoughts on the best way to show that. My first thought is to insert a red ellipsis after that last visible character, although that could certainly cause it to re-wrap and overflow in a different spot. Other thoughts involve drawing something in a new layer at the overflow location, such as an ellipsis in a semi-transparent capsule shape.



Alex Zavatone
 


On Nov 9, 2017, at 12:28 PM, Quincey Morris <quinceymorris@...> wrote:

On Nov 9, 2017, at 09:41 , Steve Mills <sjmills@...> wrote:

drawing something in a new layer at the overflow location

In text layout apps that I’ve used, which can flow text through multiple containers, there’s typically a small box outside the top-left and bottom-right corners of the container frame. The boxes contain some indicator if the container is linked to another preceding or following container, and if the last container is overset, the bottom-right box typically shows a red plus sign, which you can click on to go into an add-new-container mode.

Given all that, I think drawing an overflow icon over the bottom corner would be a familiar choice. If you draw an ellipsis in a capsule, you could put it just outside the frame, or float it centered over the frame edge.

Putting it inside the frame inline with the text doesn’t seem like a terrible idea, but it might be easier for the user to miss, and it leaves you open to subtle layout problems where the indicator doesn’t show at all.
_

Quincy, your observation reminds me of how Quark Xpress handled this in circa 1989.  It was a surprisingly nice indicator that “there is more to this text box”.  I think they may have put a small bottom-right box indicator and then added a chain link graphic in the box it the text container was linked to another text container.

Thinking of Steve’s original problem and ideas solution, I am wondering about the red ellipsis as well and thinking just how much of this will already be solved by the NSTextContainer or UITextView.   

What I mean is that a UILabel will display an ellipsis at the end when it has the following settings:

myLabel.adjustsFontSizeToFitWidth = NO;
myLabel.lineBreakMode = NSLineBreakByTruncatingTail;
In that case, the text is already properly truncated for you.  The only thing would be needed would be to change the color of the ellipsis that is displayed at the end or find the position of the last character and draw your own ellipsis over it…

Of course, that’s on iOS with a UILabel.  I’m not sure how a NSTextContainer or UITextView would handle this.  


Thinking about how this might look to the user, a red color often is associated with something being wrong, or a destructive action, like deleting data, as we all know.  

The trick might be getting it to work first, then once you are able to get the character position of the ellipsis, simply figuring out what you want to display there.  

Quincy’s suggestions seem to be pretty user friendly and also more straightforward to implement though.

Good luck.
Alex Zavatone




Quincey Morris
 

On Nov 9, 2017, at 09:41 , Steve Mills <sjmills@...> wrote:

drawing something in a new layer at the overflow location

In text layout apps that I’ve used, which can flow text through multiple containers, there’s typically a small box outside the top-left and bottom-right corners of the container frame. The boxes contain some indicator if the container is linked to another preceding or following container, and if the last container is overset, the bottom-right box typically shows a red plus sign, which you can click on to go into an add-new-container mode.

Given all that, I think drawing an overflow icon over the bottom corner would be a familiar choice. If you draw an ellipsis in a capsule, you could put it just outside the frame, or float it centered over the frame edge.

Putting it inside the frame inline with the text doesn’t seem like a terrible idea, but it might be easier for the user to miss, and it leaves you open to subtle layout problems where the indicator doesn’t show at all.


Steve Mills
 

I'm using NSTextContainer with exclusionPaths, NSLayoutManager, and UITextView for rendering text into balloons, and the user can control the font size. When overflow occurs, I'd like to show an indicator. Just looking for thoughts on the best way to show that. My first thought is to insert a red ellipsis after that last visible character, although that could certainly cause it to re-wrap and overflow in a different spot. Other thoughts involve drawing something in a new layer at the overflow location, such as an ellipsis in a semi-transparent capsule shape.

--
Steve Mills
Drummer, Mac geek