I'm having some issues with the vertical alignment of different currencies for some in app purchases. My purchase labels all align perfectly in dollar figures, but for larger Japanese Yen figures they appear to be pushed up. The only difference appears to be the comma, but I'm unsure how to resolve this.
I'm aligning all my labels using
coinLabel.verticalAlignmentMode = .center
Thank you in advance!
US Example:
Yen Example:
You need to use .baseline, not .center as the , descends below the baseline. Using .center centers the entire text frame around the origin. Using .baseline places the baseline of the text at the origin and ensures that the descender does not impact the placement of the text in the node.
Related
please see the image below for two examples of what is to be achived
the alignment should be on the Center Y of the first lines of each UILabels and should work regardless of font size or font. currently we have implemented this with different constraints to the top of the super view for different font and font size combinations.
the constraint to align the center of the two UILabels does not work since the text of the second UILabel is not fixed and can have several lines.
also the text is dynamic, so it is not known where the text will wrap to create the first line, thus it cannot be shown in an one line UILabel with the rest of the text in another one below.
currently this is implemented using UIKit, but if there is an easy solution in SwiftUI we can put these two labels in a SwiftUI component. so a SwiftUI solution would also be welcomed.
Your comments said "it should be on the glyphs" ... but, without additional information, my guess is that "real world" usage would not really need that level of precision.
For example:
While the glyphs are not perfectly center-Y aligned, it seems unlikely you'd run into a case where the first line of the "rightLabel" is " ' " ' " or . , . , ..
This layout can be easily done with only a few constraints - no need to do any calculations:
The "Positioning" label would, of course, be set .hidden = true so it would never be seen.
If you really, really want glyph-precision, you'll need to calculate
the Glyph bounding box for the left-label
the Glyph bounding box for first line of the right-label
calculate the "character box" offsets to align the Glyph Y-centers
and then position the two labels accordingly, or use Core Text to draw the text (instead of using UILabel).
Probably more work than necessary -- unless your actual use-case demands it.
That's an interesting problem! You can try using the centerYAnchor for the label on the left, and the firstBaselineAnchor for the label on the right... that will align the center Y with the text baseline, which isn't quite what you want.
To find the correct offset to apply, you can use the information from UIFont about the size of the characters. I'd probably start with capHeight * 0.5 and see if that looks or feels right. Something like:
leftLabel.centerYAnchor.constraint(equalTo: rightLabel.firstBaseLineAnchor, constant: rightFont.capHeight * 0.5)
This is a more difficult problem in SwiftUI, I think, because resolved font metrics aren't directly available to you.
I love the San Francisco font. And would like to use it if possible. I have a table view that shows a series of labels where each label is 6 hexadecimal digits, e.g.
F0:1A:2B
12:CE:88
The problem is that they don't line up nicely. I can enable the monospaced digits attribute for the font, but that doesn't account for the characters ABCDEF. I've tried the single monospace font (Menlo) and it looks terrible and out of place.
I'm toying with making 8 little labels one for each character (6 hex digits plus the two : separators), which seems like a huge kludge. Is there no other way. I wondered if there was a way to do something with AttributedString to get the hex digits to be same width?
If you want to use a proportionally spaced font, you'll have to draw the characters at the appropriate places. Otherwise, find a monospaced font you like.
For completeness sake, I should post what I ended up doing after accepting what #AaronBratcher confirmed.
First I created 5 separate UILabels for the following elements:
leftTwoDigits-leftSeparator-centerTwoDigits-rightSeparator-rightTwoDigits
I used constrains to constrain all of their baselines, and have 0 horizontal spacing betwixt each. The separator labels were set simply to : and normal color. The xxxTwoDigits labels were given the string AA. A is NOT the widest character, C is. But A is near it. C is too wide, and A is wide enough. The color of these labels was set to clear so it doesn't actually show up.
Then 6 more UILabels are added. Again the the same baselines. The first two are constrained to the leading and trailing sides of leftTwoDigits and constrained to match in width. Repeat for the other 4 cells. Make all centered. And populate them individually with the individual digits.
I would like to align the start of the text of two UILabels. I aligned the two UILabels (with the yellow and grey background) and used sizeToFit: to shrink the UILabels to the content but the text is not perfectly left aligned. There is a gap on the left. The gap is bigger or smaller depending on the first character. I would like to align the red lines in the following picture. There is even a small gap with the small font in the grey UILabel but it's barely visible.
With the Z character the gap is smaller but still visible by the yellow area left to the Z
A simple UILabel alignment does not help for my specific problem, because the text content is dynamic and not static. So there could be any combination depending on the data I get from the backend. Therefore I was hoping for a UIFont or UILabel attribute that could return the size of the gap based on the current rendering of the text.
I know that there are great UIFont related attributes like baseline, capHeight and ascender one can access to align text but there seems to be no attribute that would return the value of this gap on the left.
If this doesn’t need to be two UILabels, you could have one with attributed text. Then both lines would be subject to the same layout.
I haven't tried the GUI which people have been posting Screen Shots of, however... the behaviour is consistent with the very nature of typography.
The font sizes are completely different, therefore the width of an em is different, subsequently the letter-spacing is also different.
See this: http://www.w3.org/WAI/GL/css2em.htm for more information.
I know this answer doesn't give you what you have asked for, however it should explain why this is happening.
For customisation such as this (if HTML and CSS) I would use a negative / positive margin on the sub text, however seeing as you are using backgrounds use padding (or the equivalent in your GUI).
Use attributed text of UILabel
set indentation as per your requirement
ref screen shot
Select both the labels and add a constraint called align leading edges.
I am using a custom .ttf font called Classic Robot in my iOS app. I am trying to add Japanese translation and this font appears to not support Japanese characters. This is not a problem initially because it appears iOS automatically changes the font to the system default font which can support Japanese.
My issue is that these two fonts have different vertical alignment when rendered by iOS as in the below pictures. As you can see, the Japanese font is aligned near the top of the white box (which is the frame) whereas the English font sits somewhere near the middle. This makes it difficult for me to layout text properly. Does anyone know why this might be the case?
I believe it might have to do with the ascender and descender properties on the iOS font I cannot be certain.
Your question is: "Does anyone know why this might be the case?"
The answer is that the ascender property of the Japanese font is smaller than the Classic Robot one. This can be fixed by generating a custom Japanese font that has an ascender property large enough to make it match the spacing you get from the other font. This can be done by downloading the Apple Font Tool Suite and following the instructions posted in this answer.
Also for buttons you can solve the issue by increasing the insets:
myButton.contentEdgeInsets = UIEdgeInsetsMake(15.0, 0.0, 0.0, 0.0);
You can specify a different value for each of the four insets (top, left, bottom, right). A positive value shrinks, or insets, that edge—moving it closer to the center of the button. A negative value expands, or outsets, that edge. This works for the button image and button title.
Check out the loading date label. It could be '2 May' or '24 December'.
I want to display the label 'days remaining' after it. Since the width of 'loading date' is dynamic, via auto layout I haven't been able to place 'days remaining' after it. It stays at a fixed distance.
How to adjust it in xcode, using autolayout?
I've been able to achieve it via code by disabling autolayout. However with iOS 7 coming up and autolayout would be essential to maintain iOS 6 and 7 at the same time, I thought it would be a good time to do it with autolayout.
Make sure that the spacing between your two labels is set to auto and that your days remaining label is left aligned. I suggest keeping a constraint between the trailing edge of your days remaining and the superview, but lowering the priority a bit. The goal there is to ignore it when the label should be far away from the superview, but not clip or go outside of the visible area when the date is very long.
You may also need to increase the content hugging priority of the date label and/or decrease the compression resistance of your days remaining label.
You may get better insight into what your labels are doing by setting the background color on them temporarily. The goal is to see how large your labels are, where the text is in the label, and where the spaces are. If there are large gaps between the labels that will help you figure out where to add constraints or adjust the priorities. If the labels are taking up the full width then it will help you get the alignment set correct.