HowTo: Customizing .cssText String - e2technologies/ViewCSS GitHub Wiki

The "cssText" property that is extended on the UILabel, UITextView and UIButton elements provides a wrapper around NSAttributedText to allow CSS to be applied to the text. The Property Support page defines the different properties that can be used to manipulate the text.

To simplify use, the library takes advantage of the use of standard HTML tags to modify portions of the text. A simple example is shown below

self.label?.cssText = "This is some <span class=\"bold\">really</span> cool text"

This string will create an NSAttributedString. The "This is some " and " cool text" string will use the default formatting of the label (set earlier using the ".css" call). However, the "really" portion of the string will override the default with the settings captured in the "bold" class.

If our CSS dictionary looked like this

let css = [
    ".label": [ "font-size" : "12px", "color" : "black" ],
    ".bold": [ "font-weight" : "bold" ]
]

then we would get something that looks like this

This is some really cool text

Some notes about using .cssText

• the characters in the actual text (outside of the tags) must not contain "<" or ">". The library extends the String class to provide a ".toSafeCSS" property that will do the "&lt;" and "&gt;" replacement for you
• the library does NOT support nested HTML elements
• if the parsers come across an error, they will exit parsing and use whatever they have formed so far (I am still trying to decide how I want to handle errors)

The .cssText property takes advantage of the HTML structure to provide the ability to define links. This is done using the standard "a" tag. An example of using links is shown below

self.label?.cssText = "This is some <span class=\"bold\">really</span> cool text.  Click <a href=\"https://www.google.com\" class="link">here</a> to see more"

If our CSS dictionary looked like this

let css = [
    ".label": [ "font-size" : "12px", "color" : "black" ],
    ".bold": [ "font-weight" : "bold" ],
    ".link": [ "color" : "blue", "text-decoration-line" : "underline", "text-decoration-color" : "blue" ],
]

then we would get something that looks like this

This is some really cool text. Click here to see more

Some notes about using links in .cssText

• Clicking on the links only works in a UITextView (iOS limitation)
• To intercept the clicking of the link, you must implement the UITextViewDelegate method "textView( shouldinteractWithURL: in: interaction:)". See the UITextViewDelegate documentation for more details

Often the user wants to resize the height of a UITableViewCell based on a some of the values in the cell. We'll take the following example

class CustomTableViewCell: UITableViewCell {
    
    @IBOutlet weak var captionLabel: UILabel?
    
    override func awakeFromNib() {
        super.awakeFromNib()
 
        self.css(object: self.captionLabel, class: "cell-title")
    }
    
    func setCaption(_ caption: String?) {
        self.captionLabel?.cssText = caption
    }
    
    class func cellHeight(caption: String?) -> CGFloat {
        let attributedText = (caption ?? "").cssText(parentClass: self, class: "cell-title")
        
        // TODO: Calculate the height using the attributedText "boundingRect" method
        return 0
    }
}

Note that cssText should be called using the same parameters as the css call with the parentClass being the class of the object that invoked the css call. More specifically

<caller>.css(object: <object>, class: <class>, style: <style>)

becomes

<string>.cssText(parentClass: <class of caller>, class: <class>, style: <style>)

The user might also want to resize the height of a view based on the value. See the following example

class MyView: UIView {
    
    @IBOutlet weak var textTitle: UILabel?
    @IBOutlet weak var viewHeight: NSLayoutConstraint?
    
    override func awakeFromNib() {
        super.awakeFromNib()
        
        self.textTitle?.numberOfLines = 10
        
        self.css()
        self.css(object: self.textTitle, class: "cell-title")
    }
    
    func setText(_ text: String?) {
        // Set the text
        self.textTitle?.cssText = text
        
        // Recalculate the height
        var height: CGFloat = 0
        if let attributedText = self.textTitle?.cssAttributedText {
            // TODO: Calculate the height using the attributedText "boundingRect" method
        }
        self.viewHeight?.constant = height+20
    }
}

Note that in this example, the "cssAttributedText"" property is used to retrieve the NSAttributedString after it has been generated. This saves processing time.