macOS Is it possible to wrap text for a button name

[TheCat007]

This seems so easy to do in Windows Visual C++ that I'm surprised it cannot be done in XCode's interface builder. In case I'm not making sense, I'll explain. I'm trying to create a button whose name is long enough to wrap in the button display. When i select the other settings to clip or truncate it works but Word or character wrap does not. What gives.

 

[Sayer]

If the text is so long that it must wrap, you are doing something wrong. Rethink the label or the interface design.

 

[maxrobertson]

If the text is so long that it must wrap, you are doing something wrong. Rethink the label or the interface design.

Exactly. There's a reason this is not available. No button should have text that is longer than a few words, and one should generally suffice. You're doing it wrong if you think you need this feature.

 

[TheCat007]

Hi, Thanks for the response. Personally I think it's a crock. I don't see why you can't easily do it in Interface builder. Visual C doesn't have a problem with it. The problem is I;m trying to create a Mac version of a Windows Application and I wanted it to have the same look and feel. The button accepts every other attribute except for wrapping. Personally I feel its a bug. The App I'm using needs labels like "Read all Sensors", "Operator Mode", Diagnostic Mode", Diagnostic exerciser" to name a few. I really need it to look and feel the same as the Window App. Surely there's got to be a way to do this. I tried putting a label over the switch which looks good but when I try to click the button the label is of course in the way and the button doesn't function, Placing an image of the text on the switch works but of course the text doesn't look that great since it's bitmapped.

 

[TheCat007]

And another reason I think your logic is flawed regarding button naming. How do you create a button with text that runs vertically. Character wrap doesn't work either.

 

[GorillaPaws]

OSX isn't windows. OSX users have different expectations for their app's behavior/appearance/GUI Layout than a Windows user does. You might want to take a look at Apple's Human Interface Guidelines. It has some good info such as:

Do not use a push button as a label. Instead, use static text to label elements and provide information in the interface...

I personally hate using apps on OSX that've been ported to try to maintain the same look and feel as it had under windows. I think there may be a narrow set of circumstances where this might be ok, but you would need a REALLY good reason for wanting to do so. This is why Apple hasn't made it easy to do so-- because it's not the right thing to do.

Maybe you can post a screenshot of the UI on the windows app you're porting and I bet you'd get several suggestions on how to tweak it to remain within Apple's HIG guidelines?

 

[TheCat007]

Unfortunately in my world the people using our software generally do not have much computer experience therefore we take great pains to make sure the interface remains the same and is simple to use no matter what platform it is being run on. Also, unfortunately most of our users are windows based.

It seems though I'll get no sympathy here. I understand Apple has guidelines for their user interface design. I just find it a bit weird that there are limits to my creativity when designing interfaces for the Mac. I don't seem to have those limits in the Visual C interface design. Has nobody ever wanted to place a vertical button in their interface. This is the look I'm trying to achieve

 

[kainjow]

Probably easiest way is to just create images styled for OS X and make buttons out of them.

Edit: actually, if you create a Square or Bevel Button in IB, you can then place a newline (\n) in between each character and the buttons will draw it correctly, which will create your effect:



Here's the code I used:

- (NSString *)verticalText:(NSString *)text {
    NSMutableString *s = [[text mutableCopy] autorelease];
    for (NSInteger i=0; i<[s length]; i+=2)
        [s insertString:@"\n" atIndex:i];
    return [s stringByTrimmingCharactersInSet:[NSCharacterSet whitespaceAndNewlineCharacterSet]];
}

- (void)awakeFromNib {
    [but1 setTitle:[self verticalText:@"LEFT"]];
    [but2 setTitle:[self verticalText:@"RIGHT"]];
}

 

[GorillaPaws]

You'll typically see ^v<>, implemented in a circular button cut into 4 pieces in OSX like in the following screenshot:

This button is implemented in a panel, and I know I've seen examples in regular windows before.

I'm pretty sure this is a custom NSButton, so you'd have to "roll your own" had you been trying to duplicate the native feel of the platform you were developing for. I'm still not totally convinced you need to duplicate your windows experience on OSX just because your users are inexperienced (I think this might be an even more compelling reason to stick to conventions and not surprise them).

EDIT: here's an example from an older version of iPhoto:

 

[TheCat007]

Great! thanks. I'll give it a try and report back.

 

[TheCat007]

Coolness!!!

That works for me Thanks for your input. I have faith again. I still can't help thinking though that for such a simple request why do I need so much coding. Mac's are supposed to be easier and more user friendly right? It would be so much easier if you could do this in interface builder and not have to worry about it and have interface builder's user interface window look exactly like the executed version.

I really feel Interface designer needs some upgrading. There seems to be too many quirks. Another thing that annoys me is the way you have to add actions and outlets. It seems only natural to add needed actions in Interface builder and have it update the header files directly. No matter what I try it doesn't work for me unless I add links in XCode first. Filemerge doesn't work. It seems to point at two cache files instead of the actual AppController file I'm trying to save to. I know this comment will be taboo and raise a few eyebrows but they could take a lesson from the way Visual C++ handles Button click action creation (-:

 

[TheCat007]

OK, This may not seem exciting to you but it is to me. I'm new at Mac programming. I like your vertical text method but is it considered bad programming practice to use this code instead to generate the attached pic.

[Button1_Title setTitle"L\nE\nF\nT"];
[Button2_Title setTitle"R\nI\nG\nH\nT"];
[Button3_Title setTitle"Diagnostic\nExerciser"];
[Button4_Title setTitle"Change to\nOperator Mode"];

 

[kainjow]

Manually inserting newlines like that makes it harder to edit and virtually impossible to localize properly, and you should always be aware of localization issues when dealing with user interfaces.

 

[HiRez]

You actually can enter multi-line button text in IB, just use Option-Return to insert a return (this won't end editing like a Return by itself would). Note: You can still only see one line while typing, the whole thing won't be visible until you complete the edit. Option-Return is a good general Mac trick that works in a lot of situations where the Return key is linked to some action (like in text fields within a form on web pages).

 

[TheCat007]

Thx all. Very good input. Much appreciated.