GSFancyText

GSFancyText is an iOS rich text formatting and drawing framework. It supports a subset of CSS attributes, and a few markup tags to apply the styles to the text.

E.g. you can create an GSFancyText instance with the style ".red { color: #ff0000; }" and the markup string "red text". Then you can either use the drawInRect:(CGRect) method or create a GSFancyTextView to present the styled text on the screen.

It has some advanced features, such as inserting customized drawing blocks (the lambda tag); generating accessibility label; re-using the parsing results; specifying line limit and truncation mode, etc.

Quick Start Example

NSString* styleSheet = @".green {color:#00ff00; font-weight:bold}";
[GSFancyText parseStyleAndSetGlobal: styleSheet];
GSFancyText* fancyText = [[GSFancyText alloc] initWithMarkupText: @"<span class=green>Hulu</span> Plus"];

Then you have 2 ways to present the fancy text to the user.

1. Through a GSFancyTextView object

   GSFancyTextView* fancyView = [[GSFancyTextView alloc] initWithFrame: CGRectMake(0, 0, 100, 200) fancyText: fancyText]; [self.view addSubview: fancyView];

2. Insert some code into the drawRect method of your own customized UIView subclass

   [fancyText drawInRect: rect];

Features

Formatting

Basic Formatting

The CSS styled formatting string is in the following format:

.class_name1 {
    attribute_name1 : value1;
    attribute_name2 : value2;
    attribute_name3 : value3;
}
.class_name2 {
    attribute_name1 : value1;
    attribute_name2 : value2;
    attribute_name3 : value3;
}

The following attributes are supported:

Attribute name	Value format	Default value
color	rgb(255,255,255), #ffffff, red, blue, etc	black, or #000000
font-family	a string which is a valid iOS font family name	Helvetica
font-weight	can be either bold or normal	normal
font-style	can be either italic or normal	normal
font-size	a floating point number, unit is point	14 (UIFont systemFontSize)
text-align**	can be either left, right, or center	left
vertical-align	can be either baseline, top, bottom, or middle	baseline
line-height	a percentage value like 200%, or a pixel value like 50px, or 50	100%
margin-top**	a percentage value like 200%, or a pixel value like 50px, or 50	0
margin-bottom**	a percentage value like 200%, or a pixel value like 50px, or 50	0
margin-left**	a percentage value like 200%, or a pixel value like 50px, or 50	0
margin-right**	a percentage value like 200%, or a pixel value like 50px, or 50	0
line-count**	an integer. Specifies the maximum line count.	0 (which means no limit on line count)
truncation-mode**	can be either head, tail, middle, or clip. Used when line-count limit is applied	tail

** These attributes can only be used with

The following markup tags are supported to apply styles to text

Note: Tags with unsupported tag name will be treated like . E.g. dog will apply the style of class_name to dog, and will not create a new line.

Tag	Note
\ \	Formats inline text with the CSS class
\ \	Make the text inside a newline and format it
\ \	make text bold
\ \	make text italic
\	A space for inserting customized drawing code