StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>While there may be other ways, one way to accomplish this is to first draw the string with only a stroke, then draw the string with only a fill, directly overtop of what was previously drawn. (Adobe InDesign actually has this built-in, where it will appear to only apply the stroke to the outside of letter, which helps with readability).</p> <p>This is just an example view that shows how to accomplish this (inspired by <a href="http://developer.apple.com/library/mac/#qa/qa2008/qa1531.html" rel="noreferrer">http://developer.apple.com/library/mac/#qa/qa2008/qa1531.html</a>): </p> <p>First set up the attributes:</p> <pre><code>@implementation MDInDesignTextView static NSMutableDictionary *regularAttributes = nil; static NSMutableDictionary *indesignBackgroundAttributes = nil; static NSMutableDictionary *indesignForegroundAttributes = nil; - (void)drawRect:(NSRect)frame { NSString *string = @"Got stroke?"; if (regularAttributes == nil) { regularAttributes = [[NSMutableDictionary dictionaryWithObjectsAndKeys: [NSFont systemFontOfSize:64.0],NSFontAttributeName, [NSColor whiteColor],NSForegroundColorAttributeName, [NSNumber numberWithFloat:-5.0],NSStrokeWidthAttributeName, [NSColor blackColor],NSStrokeColorAttributeName, nil] retain]; } if (indesignBackgroundAttributes == nil) { indesignBackgroundAttributes = [[NSMutableDictionary dictionaryWithObjectsAndKeys: [NSFont systemFontOfSize:64.0],NSFontAttributeName, [NSNumber numberWithFloat:-5.0],NSStrokeWidthAttributeName, [NSColor blackColor],NSStrokeColorAttributeName, nil] retain]; } if (indesignForegroundAttributes == nil) { indesignForegroundAttributes = [[NSMutableDictionary dictionaryWithObjectsAndKeys: [NSFont systemFontOfSize:64.0],NSFontAttributeName, [NSColor whiteColor],NSForegroundColorAttributeName, nil] retain]; } [[NSColor grayColor] set]; [NSBezierPath fillRect:frame]; // draw top string [string drawAtPoint: NSMakePoint(frame.origin.x + 200.0, frame.origin.y + 200.0) withAttributes:regularAttributes]; // draw bottom string in two passes [string drawAtPoint: NSMakePoint(frame.origin.x + 200.0, frame.origin.y + 140.0) withAttributes:indesignBackgroundAttributes]; [string drawAtPoint: NSMakePoint(frame.origin.x + 200.0, frame.origin.y + 140.0) withAttributes:indesignForegroundAttributes]; } @end </code></pre> <p>This produces the following output:</p> <p><img src="https://i.stack.imgur.com/hPhHx.png" alt="alt text"></p> <p><img src="https://i.stack.imgur.com/t703Z.png" alt="alt text"></p> <p>Now, it's not perfect, since the glyphs will sometimes fall on fractional boundaries, but, it certainly looks better than the default.</p> <p>If performance is an issue, you could always look into dropping down to a slightly lower level, such as CoreGraphics or CoreText.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload