How to uniformly scale rich text in an NSTextView?

Question

Context:

I have a normal Document-based Cocoa Mac OS X application which uses an NSTextView for rich text input. The user may edit the font family, point size and colors of the text in the NSTextView.

Base SDK: 10.7
Deployment Target: 10.6

---

Question:

I would like to implement zooming of the entire UI programmatically (including the NSTextView) while the user is editing text. Scaling the frame of the NSTextView is no problem. But I don't know how to scale the editable text inside the view which may contain multiple different point sizes in different sub-sections of the entire run of text.

How can I apply a uniform scale factor to the rich text displayed in an NSTextView?

This should play nicely with "rich text", such that the user's font family, color and especially point size (which may be different at different points of the run of text) are preserved, but scaled uniformly/relatively.

Is this possible given my Base SDK and Deployment targets? Is it possible with a newer Base SDK or Deployment target?

Carolyn

Is it possible you could require 10.8 and up and make use of 10.8's built-in text zooming? If you can require 10.8 and the text doesn't have to wrap to the zoomed area, this might be a way forward. See TextEdit's View > Zoom... menu items. – Fetiparous

Answer 1

If the intent is to scale the view (and not actually change the attributes in the string), I would suggest using scaleUnitSquareToSize: method: along with the ScalingScrollView (available with the TextEdit sample code) for the proper scroll bar behavior.

The core piece from the ScalingScrollView is:

- (void)setScaleFactor:(CGFloat)newScaleFactor adjustPopup:(BOOL)flag
{
CGFloat oldScaleFactor = scaleFactor;
    if (scaleFactor != newScaleFactor)
    {
        NSSize curDocFrameSize, newDocBoundsSize;
        NSView *clipView = [[self documentView] superview];

        scaleFactor = newScaleFactor;

        // Get the frame.  The frame must stay the same.
        curDocFrameSize = [clipView frame].size;

        // The new bounds will be frame divided by scale factor
        newDocBoundsSize.width = curDocFrameSize.width / scaleFactor;
        newDocBoundsSize.height = curDocFrameSize.height / scaleFactor;
    }
    scaleFactor = newScaleFactor;
    [scale_delegate scaleChanged:oldScaleFactor newScale:newScaleFactor]; 
}

The scale_delegate is your delegate that can adjust your NSTextView object:

- (void) scaleChanged:(CGFloat)oldScale newScale:(CGFloat)newScale
{
    NSInteger     percent  = lroundf(newScale * 100);

    CGFloat scaler = newScale / oldScale;   
    [textView scaleUnitSquareToSize:NSMakeSize(scaler, scaler)];

    NSLayoutManager* lm = [textView layoutManager];
    NSTextContainer* tc = [textView textContainer];
    [lm ensureLayoutForTextContainer:tc];
}

The scaleUnitSquareToSize: method scales relative to its current state, so you keep track of your scale factor and then convert your absolute scale request (200%) into a relative scale request.

Hillegass

Thanks, lots of good info here! I will dig in and update my response when done. – Carolyn

Update: This was exactly the info I needed. I was able to use the -scaleUnitSquareToSize: method to achieve what I wanted. Thanks Mark! – Carolyn

Answer 2

Works for both iOS and Mac OS

@implementation NSAttributedString (Scale)

- (NSAttributedString *)attributedStringWithScale:(double)scale
{
    if(scale == 1.0)
    {
        return self;
    }

    NSMutableAttributedString *copy = [self mutableCopy];
    [copy beginEditing];

    NSRange fullRange = NSMakeRange(0, copy.length);

    [self enumerateAttribute:NSFontAttributeName inRange:fullRange options:0 usingBlock:^(UIFont *oldFont, NSRange range, BOOL *stop) {
        double currentFontSize = oldFont.pointSize;
        double newFontSize = currentFontSize * scale;

        // don't trust -[UIFont fontWithSize:]
        UIFont *scaledFont = [UIFont fontWithName:oldFont.fontName size:newFontSize];

        [copy removeAttribute:NSFontAttributeName range:range];
        [copy addAttribute:NSFontAttributeName value:scaledFont range:range];
    }];

    [self enumerateAttribute:NSParagraphStyleAttributeName inRange:fullRange options:0 usingBlock:^(NSParagraphStyle *oldParagraphStyle, NSRange range, BOOL *stop) {

        NSMutableParagraphStyle *newParagraphStyle = [oldParagraphStyle mutableCopy];
        newParagraphStyle.lineSpacing *= scale;
        newParagraphStyle.paragraphSpacing *= scale;
        newParagraphStyle.firstLineHeadIndent *= scale;
        newParagraphStyle.headIndent *= scale;
        newParagraphStyle.tailIndent *= scale;
        newParagraphStyle.minimumLineHeight *= scale;
        newParagraphStyle.maximumLineHeight *= scale;
        newParagraphStyle.paragraphSpacing *= scale;
        newParagraphStyle.paragraphSpacingBefore *= scale;

        [copy removeAttribute:NSParagraphStyleAttributeName range:range];
        [copy addAttribute:NSParagraphStyleAttributeName value:newParagraphStyle range:range];
    }];

    [copy endEditing];
    return copy;
}

@end

Dublin

This is the ideal answer for me, as it seems more universal. Works with NSTextField and NSTextView. Thanks! – Testudinal

Answer 3

OP here.

I found one solution that kinda works and is not terribly difficult to implement. I'm not sure this is the best/ideal solution however. I'm still interested in finding other solutions. But here's one way:

Manually scale the font point size and line height multiple properties of the NSAttributedString source text before display, and then un-scale the displayed text before storing as source.

The problem with this solution is that while scaled, the system Font Panel will show the actual scaled display point size of selected text (rather than the "real" source point size) while editing. That's not desirable.

---

Here's my implementation of that:

- (void)scaleAttributedString:(NSMutableAttributedString *)str by:(CGFloat)scale {
    if (1.0 == scale) return;

    NSRange r = NSMakeRange(0, [str length]);
    [str enumerateAttribute:NSFontAttributeName inRange:r options:0 usingBlock:^(NSFont *oldFont, NSRange range, BOOL *stop) {
        NSFont *newFont = [NSFont fontWithName:[oldFont familyName] size:[oldFont pointSize] * scale];

        NSParagraphStyle *oldParaStyle = [str attribute:NSParagraphStyleAttributeName atIndex:range.location effectiveRange:NULL];
        NSMutableParagraphStyle *newParaStyle = [[oldParaStyle mutableCopy] autorelease];

        CGFloat oldLineHeight = [oldParaStyle lineHeightMultiple];
        CGFloat newLineHeight = scale * oldLineHeight;
        [newParaStyle setLineHeightMultiple:newLineHeight];

        id newAttrs = @{
            NSParagraphStyleAttributeName: newParaStyle,
            NSFontAttributeName: newFont,
        };
        [str addAttributes:newAttrs range:range];
    }];    
}

This requires scaling the source text before display:

// scale text
CGFloat scale = getCurrentScaleFactor();
[self scaleAttributedString:str by:scale];

And then reverse-scaling the displayed text before storing as source:

// un-scale text
CGFloat scale = 1.0 / getCurrentScaleFactor();
[self scaleAttributedString:str by:scale];

Carolyn

Answer 4

I want to thank Mark Munz for his answer, as it saved me from wandering in a dark forest, full of of NSScrollView magnification madness and NSLayoutManagers.

For anyone still looking, this is my approach. This code is inside a NSDocument. All text is being inset into a fixed-width and centered container, and the zooming here keeps word wrapping etc. intact. It creates a nice "page view" sort of appearance without resorting to complicated layout management.

You need to have CGFloat _documentSize and NSTextView textView constants set in you class for this example to work.

- (void) initZoom {
    // Call this when the view has loaded and is ready
    // I am storing a separate _scaleFactor and _magnification for my own purposes, mainly to have the initial scale to be higher than 1.0
    _scaleFactor = 1.0;
    _magnification = 1.1;
    [self setScaleFactor:_magnification adjustPopup:false];

    [self updateLayout];
    // NOTE: You might need to call updateLayout after the content is set and we know the window size etc.
}

- (void) zoom: (bool) zoomIn {
    if (!_scaleFactor) _scaleFactor = _magnification;

    // Arbitrary maximum levels of zoom
    if (zoomIn) {
        if (_magnification < 1.6) _magnification += 0.1;
    } else {
        if (_magnification > 0.8) _magnification -= 0.1;
    }

    [self setScaleFactor:_magnification adjustPopup:false];
    [self updateLayout];
}

- (void)setScaleFactor:(CGFloat)newScaleFactor adjustPopup:(BOOL)flag
{
    CGFloat oldScaleFactor = _scaleFactor;
    if (_scaleFactor != newScaleFactor)
    {
        NSSize curDocFrameSize, newDocBoundsSize;
        NSView *clipView = [[self textView] superview];

        _scaleFactor = newScaleFactor;

        // Get the frame.  The frame must stay the same.
        curDocFrameSize = [clipView frame].size;

        // The new bounds will be frame divided by scale factor
        //newDocBoundsSize.width = curDocFrameSize.width / _scaleFactor;
        newDocBoundsSize.width = curDocFrameSize.width;
        newDocBoundsSize.height = curDocFrameSize.height / _scaleFactor;

        NSRect newFrame = NSMakeRect(0, 0, newDocBoundsSize.width, newDocBoundsSize.height);
        clipView.frame = newFrame;
    }
    _scaleFactor = newScaleFactor;
    [self scaleChanged:oldScaleFactor newScale:newScaleFactor];
}
- (void) scaleChanged:(CGFloat)oldScale newScale:(CGFloat)newScale
{
    CGFloat scaler = newScale / oldScale;
    [self.textView scaleUnitSquareToSize:NSMakeSize(scaler, scaler)];

    NSLayoutManager* lm = [self.textView layoutManager];
    NSTextContainer* tc = [self.textView textContainer];
    [lm ensureLayoutForTextContainer:tc];
}

- (void) updateLayout {
    CGFloat width = (self.textView.frame.size.width / 2 - _documentWidth * _magnification / 2) / _magnification;    self.textView.textContainerInset = NSMakeSize(width, TEXT_INSET_TOP);
    self.textView.textContainer.size = NSMakeSize(_documentWidth, self.textView.textContainer.size.height);
}

Nephoscope