Solving the Font Size Puzzle for Thumbnail Layers

  • Context: MHB 
  • Thread starter Thread starter Echilon1
  • Start date Start date
  • Tags Tags
    Font Puzzle
Click For Summary
SUMMARY

The discussion focuses on calculating the correct font size for a label in a thumbnail layer that is one-third the size of a full-size layer. The user aims to maintain a consistent font size ratio, specifically setting a font size of 30 points for a 100px wide layer, which should scale to 60 points for a 200px wide layer. The user has attempted various calculations using properties such as font size and thumbnail size but has not achieved the desired results. The key formula involves adjusting the font size based on the parent layer's width and the specified location percentage.

PREREQUISITES
  • Understanding of coordinate systems in graphical layers
  • Familiarity with font size properties in graphical applications
  • Knowledge of basic mathematical ratios and scaling
  • Experience with programming in Objective-C or similar languages
NEXT STEPS
  • Research how to implement responsive font sizing in graphical applications
  • Learn about using Core Graphics for layer manipulation in iOS development
  • Explore the use of Auto Layout for dynamic UI adjustments
  • Investigate best practices for maintaining aspect ratios in UI design
USEFUL FOR

Graphic designers, iOS developers, and anyone involved in creating scalable user interfaces that require precise font sizing across different layer dimensions.

Echilon1
Messages
2
Reaction score
0
I'm drawing a scene with, trying to size my font correctly. I have both a big and small version of the layer on the screen at the same time.

I want to set the font in a label on this layer (both the thumbnail and the full size version) to, for example, size 30. This works fine for the full size layer (call it ratio 1), but if I make the thumbnail 1/3 as big, how do I calculate that the font should be 1/3 as big? I can't get the logic right despite multiplying these numbers all ways.

The properties which the user can change are:

- Font size (pts)
- Thumbnail size (px wide)

To position the label correctly I'm using this (which works):

Code:
// 'element' is the customizable element. element.location is  the percentage across the layer where it's located. Eg: 50 is half way
        CGPoint relativeCoords = ccp (self.contentSize.width/(100/element.location.x),
                                      self.contentSize.height/(100/element.location.y));
        layer.position = relativeCoords;

To determine the right font size, I've tried, among other variants, this (to no avail):

Code:
-(void)sizeToRelative(CGSize)parentSize {
      // self.lbl is the layer within my element
      CGFloat ratioWidth = (parentSize.width/100);
      CGFloat ratioFontSize = (textEle.textProperties.fontSize/100)*(1/3)*(parentSize.width/100);
      [self.lbl setFontSize:ratioFontSize*element.textProperties.fontSize];

The idea is that if I pass in a `parentSize`, to calculate the relative font size. The 'default' size should be as big as 30px in a 100px wide layer. If I have a layer 200px wide, it should return 60 if the user sets the font at size 30.
 
Mathematics news on Phys.org
In psuedo code, this would be:
Code:
        // 'element' is the customizable element. element.location is   the percentage across the layer where it's located. Eg: 50 is half way
        xFromOrigin = width/(100/location.x)
        yFromOrigin = height/(100/location.y));

To determine the right font size, I've tried, among other variants, this (to no avail):
Code:
Given a parentSize with a width and height:
       ratioWidth = (parentSize.width/100);
       ratioFontSize = (fontSize/100)*(1/3)*(parentSize.width/100);
       adjustedFontSize = ratioFontSize*fontSize];
 

Similar threads

  • · Replies 1 ·
Replies
1
Views
4K