I am using the black and white circle in my project when I noticed that on ios chrome the white circle is larger than the black circle.
● - U+25CF
○ - U+25CB
In a desktop environment the circles appear to be the same size but have slightly different heights. The difference is not noticeable.
I am trying to make these circles the same size on ios chrome.
I feel like I have eliminated any variables and that the browser is responsible for the different sizes of these circles.
photo
Actually, as far as unicode is concerned, all characters are font dependant. When a certain character is not available, it is picked from a fallback font.
If you had not configured a custom font, or if these chars are not available in the font you picked then the different sized circles are in the default font used by chrome/ios.
So, you have two ways to go: either find a font that have the characters drawn in a way that suits you, and force that, or give-up using unicode characters for these glyphs and use inline images instead.
You could make use of SVG drawings which can be encoded within the HTML markup itself, that will ensure a consistent look.
Related
I want to use ▾ – BLACK DOWN-POINTING SMALL TRIANGLE in my app, but in reality, the triangle is misshaped and smaller than what is shown on the web browser. Is there a way to keep the size and the shape of this symbol(or unicode symbols in general) exactly the same in Xcode as what they are on the web browser?
I am writing an app that requires labels w/ musical accidental symbols, called sharp and flat (♯ and ♭, respectively). Specifically, I need a label that says c♯. It is irrelevant to the question what these two symbols mean within a musical context. My app's main font is Open Sans. However, because Open Sans doesn't specify a character for the sharp and flat symbols, it uses a generic sharp and flat symbol that I find unattractive. However, I know that Helvetica Neue (or the iOS system font) has some well made symbols for sharp and flat, so I decided to change the label's text to an attributed string so I could make the c Open Sans, and the ♯ Helvetica Neue (both size 24). I did this through the interface builder. Even though everything looks exactly the way I want in the storyboard, when I launch it in the iOS Simulator, the labels with attributed strings are significantly shrunken from the other labels. I should note that the label has 3 AutoLayout constraints, though these contrasts are positionally related only, not size related.
Things I have tried (unsuccessfuly):
Using only one font
Doubling the font size (was too big)
Removing autolayout constraints
I would greatly appreciate it if someone could explain how to correctly create these labels. I am happy to provide any more information that is needed.
Thank you
I discovered that the problem is that NSAttributedString does not (yet) support custom fonts through Interface builder. It looks like I will have to subclass. This question essentially boils down to be the same as this one: Attributed string with custom fonts in storyboard does not load correctly
We use a custom font face and custom font sizes in our application.
When running the application on an iPhone 6 (haven't tried 6+ yet but I assume it's the same) all fonts look blurry. We also have an internal tool that uses the system font and it looks blurry as well.
Why is that and what is the right approach to get them to render as crisp as they do on an iPhone 5?
Perhaps your labels or drawing points aren't on an exact pixel, but instead on a fractional pixel. To prevent such situations use methods like ceilf(), floorf() and CGRectIntegral().
How do I match the font pixel size given to me by my designer in PhotoShop to the correct font size in Xcode Interface builder.
For example, my designer is using Helvetica Neueu Regular 32px Font in his design.
I've used a few points to pixel translation sites, but it doesn't seem exact.
I have attempted to follow the answer from this question, but to no avail:
https://stackoverflow.com/a/6107836/1014164
You will never have perfect results when visually comparing a Photoshop comp to a real program. In fact, it's not un-common for a text layout to be different between different computers because version and operating system differences (as well as monitor layouts) cause the text to reflow every time it's edited.
Unless things are very much different in other versions of Photoshop, your designer hasn't specified 32px because Photoshop doesn't lay text out in pixels - it works in points/picas. The exact text rendering is also dependent on the document's resolution (which is different between print and screen).
The best you can do is get the text to look roughly proportional to the designer's intent. In modern iOS, most apps will use the user's customized font settings anyway.
I have a bitmap font sheet, and I would like to have each glyph as its own separate image. Do I just need to manually find the width of each glyph and extract them one by one, or is there a better way to do it?
If you're only going to do it once, a quick and simple way is to just display each character in a window and do a screen capture, then split that image into pieces. If you use something that recognizes Tab characters you can get them evenly spaced so that you don't have to measure more than one character.