2

The vertical bar | character with in a string literal is displaying differently in Xcode as well as on iPad simulator when its rendered.

Basically I'm just delimiting a set of values by vertical bar | character as a NSString literal.

Objective-C Code:

NSString cars = @"Ferrari | Maserati | Subaru | Porsche | Mazda | Renault | Aston | Cadillac"

which is nothing special but for whatever reason it appears in odd form in Xcode as well as on the iPad simulator.

Screen shot of issue:

Font style change for bitwise OR symbol

Green arrow shows the | character, which looks fine but the same character pointed by red arrow looks bit thick as well as blurry.

FYI:

  • I'm rendering this string literal inside a UILabel.
  • Font of UILabel is System- System with style Regular and size 14

I'm really going nuts over this issue for quite some time now and can't figure out what is causing this.

rmaddy
  • 314,917
  • 42
  • 532
  • 579
dreamweiver
  • 6,002
  • 2
  • 24
  • 39
  • 3
    Only thing that comes to mind is to check that your label's frame isn't on a fractional point. – Avi Mar 17 '16 at 12:12
  • 1
    The line is probably wide only 1 px (or some value close to it). If the position doesn't result in a whole-pixel position, subpixels will be used (antialiasing), that's why the line will be blurry. You can see the same bluriness on all other characters, too. The solution is to use separate labels, where every separator is a view, not just a part of string. Then you will be able to place the separators on integer positions. – Sulthan Mar 17 '16 at 12:14
  • Actually this is a "vertical line" character per the Unicode standard. The "bitwise OR" is just its meaning in programming languages: http://www.fileformat.info/info/unicode/char/7c/index.htm – Cyrille Mar 17 '16 at 12:18
  • @Avi , by label frame you mean the dimension on the uiview were nslabel is being placed ? well x and y axis doesnt contain any fractional value, infact xcode IB doesnt allow fractional value. – dreamweiver Mar 17 '16 at 12:19
  • well @Sulthan the blurriness of characters is due to zooming of the screen shot captured from IPad simulator. its nearly impossible to use `uiview` for divider or delimiter as its too costly and in my case there is no limit for no of cars that can come in to the label. – dreamweiver Mar 17 '16 at 12:23
  • 1
    @dreamweiver It's not costly, it just takes more time to implement. You could use a `UICollectionView` for example. – Sulthan Mar 17 '16 at 12:25
  • @Sulthan: i do appreciate you suggestion but since the data im receiving is car names from API, i may need to create UI view dynamically and have to place them as divider in between every car name i receive which is very complicated solution and also clutters the screen. – dreamweiver Mar 17 '16 at 12:28
  • It wouldn't clutter the screen. You can create a collection view that looks almost exactly like this label. It's certainly more complicated to implement, but there's nothing about a dynamic view that would prevent it. Collection views are *designed* for dynamic content. – Rob Napier Mar 17 '16 at 12:30
  • I understand what you all are trying to say but i really dont like to do so much for just one OR `|` character in the literal. i`m looking at some simple solution guys – dreamweiver Mar 17 '16 at 12:37
  • Understood. If a simple, bulletproof solution were available, I think everyone here would be thrilled to recommend it. You might get lucky. Other fonts may work better for you. Other font sizes may work better for you. Adjusting kerning might work (though it would be very fragile). But to make a 1-point dividing line really clean in a bulletproof way, you have to draw a line where you want it, not use a character. – Rob Napier Mar 17 '16 at 12:48
  • When i posted this question i never thought this would be such complicated issue, but one doubt what i have is if this problem is somewhere related to font size, then why is issue present even in xcode editor as well ? – dreamweiver Mar 17 '16 at 12:54

2 Answers2

2

This is purely a result of the anti-aliased rendering of CoreText. You can't control it as the text rendering engine of Mac OS and iOS ignores hinting instructions found in TTF and OTF files, that are intended to make characters "stick" to integer pixels.

It is merely a non-issue exhibited only on low-resolution displays such as the original iPad; devices with a Retina display have a sharper rendering and the issue, if present, goes unnoticeable.

Cyrille
  • 25,014
  • 12
  • 67
  • 90
  • hmm make sense but what is the solution for it ? also i cant use any other character as divider. – dreamweiver Mar 17 '16 at 12:25
  • I'd go with stacking UILabels side-by-side, separating them with hairline UIViews (1px wide). Probably with a UIStackView if you're targeting iOS 9. There's no universal solution here, just a matter of preference. – Cyrille Mar 17 '16 at 16:01
  • Yeah I agree on that, it looks like there is no simple solution to this. Also it really doesn't make sense to use multiple uilabels & uiview as divider ,it's just too much for such a small issue. I'm thinking to leave it as it is until I find a simple solution – dreamweiver Mar 17 '16 at 16:08
  • Consider this may not even be a problem on a high-density Retina screen. – Cyrille Mar 17 '16 at 16:39
  • Oh,that is something I haven't tested yet,I could try that option also. – dreamweiver Mar 17 '16 at 16:41
  • thanks bro, you were right this issue was not present in high density retina display ipad. since this problem is present only in older ipad i dont have to worry about it. also if you can edit your answer to include the above note, then it would be helpful for others as well. – dreamweiver Mar 18 '16 at 09:57
1

As others note, you're probably hitting a fractional pixel, which is causing anti-aliasing. I see a similar problem in Safari even just reading the text in your question. Also as others note, you seem to have other characters in this string being antialiased. Look at the P in Porsche for instance and the E in REnault. (Maybe these are compression artifacts, but may be in the original.)

One common way to try to improve this situation is to use odd font sizes (13 or 15 rather than 14). This isn't always successful, but can help. The only way to absolutely address this is to do your own text layout to make sure that the | characters are aligned rather than using a label. You can do this by letting Core Text do the layout, and then adjusting the positions of key glyphs. Or you could draw the vertical lines by hand rather than using text. (@Sulthan makes an interesting suggestion of a small collection view, which may be more flexible.)

Rob Napier
  • 286,113
  • 34
  • 456
  • 610
  • I did try changing the font size to 15 and it didnt make any difference. also i cant use `UICollectionView` for such simple issue, feels like its bit too much to do for such a simple problem, so im looking at some simpler solution. – dreamweiver Mar 17 '16 at 12:48