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
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
# 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
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
@2xscreen 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.