I often have a problem to centre text or have it aligned with other object.
This happens due to the fact, that the box of the text and not the text itself is taken for aligning the objects.
Would it be possible to get a true alignment, or maybe make that an option for text objects?
On a related topic: Text boxes are not as clean to be handled, because of a distance from object-border to actual text in the object. The distance is 2-3 Pixels, but when you try to change the height of it, the space between border and text, overwrites the text.
This occurs because the Text control has top alignment of its text but here are some workarounds you can use to easily center-align some text to another control:
Resize the Text control before aligning it to the other control
Use a line break with \r in a Label control to make it a multiline control (here is the text used in the example below: “Some text \rHere is a second row in label”)
Use a Geometric Shape control which has vertically centered text
Regarding the borders of text controls, we had to set it up this way so that it can handle correctly special characters that are used in different languages (e.g. letters containing accents and umlauts). This explains the behavior you reported.
Hope this helps. Thanks for your feedback, keep it coming!
I have basicly the same issue with lables. For my project I use an icon and a lable, aligned middle.
So when selected it looks like this, perfectly aligned:
But not selected it looks not so nice:
Aligning top looks better, but still not perfect.
So why a text is not centrally aligned within a lable?
I’ve just tried to replace a lable with a text widget, and it looks exactly same, and if i try to make my text widget more narrow, then i have the same pic as you have posted (#2 in your initial post). So it doesn’t really help as the result is basically same… In the text widget text is also not centrally aligned…
The text alignment actually depends on 3 different elements:
Icon used (Font Awesome controls the padding on those, unfortunately - I’m sorry about that!)
Font used (see default Balsamiq Sans compared to Arial below)
Size used for both text and icon
That is why some elements will align better than other ones as you can see here:
Balsamiq Sans:
Arial:
The best way to adjust manually the icons that align not so nicely is to use the up and down arrows to slightly move the text or icon control as needed.
I see your point. But Balsamiq Sans is not much of an option for me.
Right now I am wire framing interfaces for industrial machines and the manager would not take it serious if I showed up with a sans font in the presentation. Any way this could get a fix?
thanks for your reply. I’ve tried the Balsamiq Sans font, and it looks really better (not perfect but still very very much better). However in my company for the mockups we have to use our standard font, which is Segoe UI, and with this font lables with icons look not so attractive…
For now I align everything middle, as I hope later it could be somehow fixed, and then I would not have surprises in my Projects
I totally get your need here @ArcticMe and @Liubi, thanks for detailing it.
We’d like each font to behave the same way but the problem is that fonts are so different from one to the other (e.g. font’s baseline or height). We are trying to make the alignment and padding as widespread as possible but the result cannot be perfect for each font unfortunately. This is one of the reason why we designed Balsamiq Sans in our low fidelity tool, to help users especially when collaborating.
what I get from your statement is, that it takes a lot of time to make a font work properly. Could I (we) help in some way?
I mean, if it would be possible to perfectly implement the font of the machines I am wireframing for, I could easily spend a couple of hours trying to do that. If you gave us an editor for the fonts, we could share the fonts that work properly.
Some sort of crowd-sourcing, if you know what I mean.
Hope I found proper language to describe my idea, it’s still early and I might need another two or ten cups of coffee
I reported the issue in our internal tracker to see if there’s something we can do about this.
I’ll keep you in the loop as soon as I have more informations to share.
Thanks for the offer to help here, we’ll do our best to get it sorted
I have a similar problem just trying to align text with itself without resizing paragraphs. Ideally, there would be an align baselines tool when dealing with text.
Totally see why this would be useful, and it’s something we will discuss with the team. The reason the feature doesn’t work like this now is that it’s aligning the control (which includes the bounding box).
Thanks for the excellent visual examples. Will make taking about this a lot easier!
