I am writing an iPad app which requires letters to be displayed at their exact point size regardless of screen size.
I've implemented the text display using a UILabel object. I have the Autoshrink property set to Fixed Font Size, however the letters on the screen are much smaller than indicated by the font metrics. For instance the capitals of a 251 point font, which should be 3.5 inches tall, are only 2 inches on the screen. At different point sizes the same shrinkage happens.
The fontCapHeight is the same as the font size with the font I am using.
How can I make the displayed size is the same as the font size?
For instance the capitals of a 251 point font, which should be 3.5 inches tall, are only 2 inches on the screen.
You're assuming a point is 1/72", which is not true. That's a desktop publishing point. A point in iOS is a certain number of pixels (based on the scale). The number of pixels in an inch are a factor of the screen's pixel density (PPI). iOS provides no way to query for that that I'm aware of. You have to just have a big table that knows. A fairly nice one for that is GBDeviceInfo, but ultimately it just has a big table of values based on looking up specs or measuring screens.
You need your cap height (pt) to be (ppi/scale)*inches, but you can't set cap height directly. You need to set it via the em box size (the "font size"). Here's an example. It takes a label containing a font of any size and make it's cap height be 3".
let font = label.font!
let ppi = 326.0 // iPhone 6s
let scale = Double(UIScreen.main.scale)
let desiredSize = 3.0 // inches
let emBoxRatio = Double(font.pointSize / font.capHeight)
let fontSize = (ppi / scale) * desiredSize * emBoxRatio
label.font = label.font.withSize(CGFloat(fontSize))
Keep in mind that "make its cap height be 3 inches" is not the same thing as "make any particular letter be 3 inches." It depends on the font and the letter. In many fonts, glyphs with a curved top are a little taller than the cap height, and some ascenders may be a little taller than the cap height. While H, X, and I are often exactly the cap height, sometimes they're a little shorter (sometimes O is the cap height rather than X). Sometimes glyphs are above their baseline. There is nothing that says that a font even has to fit within its em box, and some fonts draw wildly outside (Zapfino, I'm looking at you).
My only point here is that you need to check your actual font carefully. Font metrics are serving suggestions at best. They're meant to make fonts with similar metrics "feel" the same. They're not always absolute measures of things.
I don't understand this:
The fontCapHeight is the same as the font size with the font I am using
If the cap height is the same as the "font size" (em box height), then where are the descenders? It feels like you've run out of em box.
Problem solved. I found the following statement at http://blog.fluidui.com/designing-for-mobile-101-pixels-points-and-resolutions/ : "An iOS point is equivalent to 1/163 of an inch. This size is always the same regardless of the resolution of the phone it is on, and comes from the 163DPI of the original iPhone." I couldn't find it anywhere in the Apple documentation, but I'm sure it is there somewhere!
Related
I am trying to calculate the physical size of a shape (diameter of a circle) on an iPod touch.
According to the apple website, the screen size is 4" and the aspect ratio is 16/9. Using pythagoras and taking into account the relative size (CG points). I should be able to calculate the physical dot size.
However it always seems to be just a tiny bit out. E.g. instead of a dot size of 1" according to my ruler it will be 1.1"
Unless I am making an incorrect assumption in above. I feel like the only source of error could be due to the constants: incorrect screen size, incorrect aspect ratio or rounding error
Stolen from wikipedia:
The display of the iPhone 4 is manufactured by LG under an exclusive contract with Apple. It features an LED backlit TFT LCD capacitive touchscreen with a pixel density of 326 pixels per inch (ppi) on a 3.5 in (8.9 cm) (diagonally measured), 960×640 display. Each pixel is 78 micrometers in width.
There could be many factors, pixel pitch or some other. Don't break it down from the device size. Instead use the size of the pixels, including any pitch between them and multiply up.
There's a library here you might find useful for different devices to get this information, I haven't used it but it looks recent and useful.
I have a question about using images for universal apps on IOS.
I've created a universal app that works on all iphone devices and ipads. I've placed all the content via storyboard. On a View I have two buttons one on the top space area that is 40 points high and as wide as the view, one on the bottom area also 40 points high and as wide as the view and an image that is a square (A x A) in the middle of the view, the image is constrained by horizontal and vertical (For it to stay always aligned in the middle of the view).
(I understand that if I use an image that is 100 points by 100 points image at 1x, I need to create two other images at 200 points by 200 points for 2x and 300 by 300 for 3x.)
1) So if I constrain the UIImage container by height and width equal to 100 by 100, it will be 100 by 100 points in all devices. But I want it to use as much space as possible. That would mean that on iphone 5 - 6s+ it would always be 100 by 100, it would look smaller on every growing screen. It would also mean that I would need to make it bigger for Ipad (Storyboard changing to regular regular to change UIImage container size for ipad, ex. increase it to 300 x 300). Put once I make it bigger, the image I have will be to small for that size therefore turn blurry or pixelated.
Right?
2) If I would like to be able to use as much space as possible I thought of using the following method. Constraining the UIImage to be equal width as the view but reducing its multiplier to 0.9 or 0.8 (Therefore making it smaller then the view width) and placing an aspect ratio of 1:1(To maintain it square). That way taking advantage of most of the view space that is free, and In all the devices it would always seem filling the same space. However the problem would be that the image would have to be different sizes. (Ex. iphone 5 = 150 x 150, on iphone 6 = 250 x 250, on iphone 6+ = 320 x 320 ans on ipad 600 x 600).
so If I make an image that in 2x that is 150 x 150, when its used on the iphone 6 it would be distorted or pixelated and the same for for the rest.
So can someone help me understand what I should do? or link a tutorial?
Please help!!
I've found that the best way to solve this problem would be to make a much larger image and let the constraints resize it. That way, you've covered your bases if new resolutions are developed, or with the current varying sizes. A much larger image would not look bad if it was compressed into a smaller space, but you might lose some details.
I am setting a custom font to all subviews (such as UILabels) inside my view by a custom function. However, if I try to correct the font size for specific UILabels only via
[lbl_EXAM_Statistics setFont:[UIFont fontWithName:#"PTSans-Regular" size:13]];
The 13point seems to be a little "too small" from what was given me from the Screendesign.
In the psd file however its 13pt to be exact.
Why does the 13pt font size differ from the 13pt font size in my app?
In the screenshot the above text is from the psd file, the bottom one from the iphone simulator.
If I want to get near the text size from the Screendesign to my app I'd have to use somewhat of 18pt - but I cant waste time playing around how to get the exact pt, thats a huge timewaste with all the font size I have to specify directly. So there must be a better way.
Totally depends on your psd.
Best is to set your metrics in Photoshop in pixels. So you can see the size of your font in pixels.
Then if your PSD is at retina size (640 px width), you just have to devide by 2 the px size of your font and you will have the good result on your app.
In the end, don't use pt but px in your PSD and it will be allright (just have to think that 1point in iOS is 2px on retina screen and 1px on non-retina)
Photoshop's font size and the iPhone's should match assuming the PSD file is set to 72dpi (or 144 for retina images).
You can check this in Photoshop using Image->Image Size... and then set the resolution to 72 pixels/inch (keeping the pixels untouched by unchecking "Resample Image:"). If the image is for retina resolution, use 144 pixels/inch.
This will not change the image in any way but make all pt measurements in Photoshop match the iPhone's coordinate system, retina or not.
I am working on a BlackBerry App that has a lot of ImageButtons, LabelFields and MessageBoxes. What appears to be perfect on one screen size, seems a mess on the other. For instance, Vertical Field Managers that are neatly aligned center with LabelFields, are left/right aligned on bigger screens. Images that cover the width of the screen appear too small on larger screens. Is there some mechanism to auto-align and dynamically change images with respect to the screen size. Any ideas and documents that can help in this regard?
Here are some tips for making screens that look good on almost all devices:
Use less images. If you have to use images, use atleast 3-4 for different screen sizes. for example if you need to have an image as the screen header, use images with widths 320px, 480px and 640px. Load image depending on the width of the screen.
Do not use pixel measurements. Use point measurements instead. Most of the devices are similar in terms of physical size, whereas they have huge difference in pixel density. Using this you can have a screen which will look exactly identical on curve (320x240), bold2 (480x360) and bold 4 (640x480). If you notice, they have the same aspect ratio and similar physical size.
Do not hardcode positions. Instead use FIELD_HCENTER and DRAW_HCENTER etc for fields.
Do not use fonts with fixed pixel height. Use fixed point height instead.
If using custom fields, make sure that they can automatically expand according to device and pixel density.
I used the 9330 simulator for developing my app, and now once I put it on a blackberry bold, I've noticed that my text and images appear much smaller on the device than the simulator. Is there anyway to fix this without having to change every objects height and width? Maybe I need to use Display.getHeight() and .getWidth() more instead of hardcoding numbers?
One way I dealt with this is making the size of my elements variable. I did this by, upon loading the app, detecting the screen size and applying a multiplier that modifies my elements by a given %, the % depends on the screen size. I calculated these percentages by taking a base screen size and seeing how much the screen sized varied from one model to another, there are only 4 screen sizes I believe.
Yes, you shouldn't hardcode any number as bold and curve have differnt screen resolutions
Curve: 8800s, 8300s, 8500s, 9300s 320x240
Bold: 8900s, 9000s, 9600s, 9700s 480x360, 480x320 (Bold 9000)
You will have to change every place you used that numbers and change to gethHeight and getWidth() where needed
For the images you should scale the object, something like this:
Bitmap bitmap = new Bitmap(width, height);
yourBitmap.scaleInto(bitmap, Bitmap.FILTER_BILINEAR);
For texts you should use something like this:
LabelField field = new LabelField("TEST");
field.setFont(field.getFont().derive(Font.PLAIN, yourFontSize));