Using common layers for text

I sometimes still use common layers for text, like we used to do before the arrival of Text Layers.

Their advantage over Text Layers is that you can access their HTML property, and by writing ‘straight to the HTML’ you can use inline styling.

Their disadvantage is that all the text styling has to be done on the style property.

Here’s an example of how I use them: Some ‘overview’ prototypes show code examples that you can click to copy the code. They’re formatted like real lines of code, with syntax highlighting for strings (green) and numbers (purple).

First I create CSS classes for the different text colors at the beginning of the project. Custom CSS can be ‘inserted’ into your project with 🛠 Insert CSS.

# CSS classes for use in <span>
Utils.insertCSS "
    .blue
    .lightblue
    .purple
    .green
"

Then I set the text styling on the layer that will contain the text. This has to be done on the style property, of course.

# Text styling for “codeExample”
codeExample.style =
    fontFamily: "Menlo, Monaco, Courier, monospace"
    fontWeight: 500
    fontSize: "12px"
    lineHeight: "40px"
    paddingTop: "30px"
    paddingLeft: "30px"

You do this like you would do it in CSS, so with px to denote that you want the size or distance to be in pixels.

And then I give the HTML layer its content. The text is not set on text, like you would with a Text Layer, but on html.

# Setting the .html
codeExample.html = """layer = <span class="blue">new Layer</span><br>
    image: <span class="green">"images/css3_logo.png"</span><br>
    width: <span class="purple">150</span><br>"""

Because I’m overwriting the HTML of the layer I can now use inline <span> elements (with the desired CSS class) and use non-breaking spaces ( ) to emulate tabs.

Newline characters (\n) will now, of course, be ignored. In HTML we use <br>.

Using a CSS filter shadow

One disadvantage of using HTML layers is that shadows will be applied to the layer itself, and not to the text. (The layer will be treated like one with only a background color and no content.)

You can fix this by using another bit of CSS: a CSS drop shadow filter.

layerB = new Layer
layerB.style.webkitFilter = "drop-shadow(20px 20px 8px rgba(0, 0, 0, 0.5))"

A few remarks:

• You need to apply the filter after the layer was created (as in the example above).
• You might need to change the X and Y values depending on your device’s scaling ratio. The prototype below is for the @2x screen of an iPad, so I doubled the distances for its CSS shadow.
• Note that you cannot set the spread; WebKit doesn’t support it for this type of shadow.

Standard shadow vs. CSS filter shadow. Click the code to copy it

You can copy/paste the code generated by this prototype for use in your projects.