HTML in Nuke

HTML is a programming language designed to view documents or websites in a web browser, although we can make use of it in Nuke to add some extra style to our nodes, gizmos, etc.

The aim of this article isn’t to teach you HTML, as that would be rather convoluted for what you need to know, but instead, I’ll share some easy snippets of code that will help you inside of Nuke!

 

Styling text

If you’ve ever seen or written a line of HTML before, you already know that every tag has an open and a close. <tag> is open, </tag> is close, and you wrap whatever text you want to style inside specific tags. Super simple!

Let’s focus on bold, italics, underlines & colours, as they’re the most common. Here are the snippets you need to know:

<b>I am bold text</b>
<i>I am italicized text</i>
<u>I am underlined text</u>
<font color='cyan'>I am cyan text</font>

You can even do all of them at once (be sure to pay attention to the order of the tags — first to open is the last to close)

<b><i><u><font color='green'>I am all the things!</font></u></i></b>

Changing the colour of text can be done with words for common colours

<font color='red'>R</font><font color='orange'>A</font><font color='yellow'>I</font><font color='green'>N</font><font color='cyan'>B</font><font color='blue'>O</font><font color='purple'>W</font>

But since we’re using HTML, we can use hex codes.

<font color="#ffd700">Golden glory!</font>

Styling text isn’t restricted to node labels. It works on Backdrop Nodes, gizmos, knob labels, etc.

However, that’s just scratching the surface. Inside the <font> tag, you can stack up a whole load of things to change the typeface <font face=”Your Font Here”> or the size <font size=”48″> or even both <font face=”Big Font” size=”100″>. This is what it looks like in action, on a Text Knob I created.

<br>

I am a text knob with some <font color="green"><b>sweet styling</b></font>!

<br><br>

<font size="40">IS THIS BIG ENOUGH?</font>

<br><br>

<font color="magenta" face="Comic Sans MS" size="20">You can even use Magenta Comic Sans...</font>

<br><br>

Do you like <a href="http://www.benmcewan.com/blog">links to cool stuff</a>?.

<br><br>

Hang on, what are these <br> tags? What does the <a> tag do?

<br> stands for Line Break, which is necessary when using HTML to go to the next line. You’re unable to simply hit the Enter key to do that anymore…

<a> stands for Anchor, which lets you turn text or images into hyperlinks!

 

You might have noticed that when you add any HTML to a Node’s label, it bumps everything to a left-alignment. We can fix that like so:

<center>THIS
TEXT
IS
CENTERED</center>

 

Sometimes, your typeface will change upon adding HTML. This is annoying, but is super easy to fix. Just toggle the Bold button a couple of times…

One interesting thing about HTML is they have preset “Heading” tags. There are more implications for these when building websites, although we can use them as presets for titles and things.

<center>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
</center>

Did you know you can insert emoji too? You can copy/paste the emoji, or add them using decimal / hexadecimal values as this page explains. The only caveat here is we now need to style our “text” using CSS rules to change their size, but it’s relatively easy to follow.

<font style="font-size:80px; color: yellow;">😃</font><font style="font-size:80px; color: brown;">💩</font>

 

Why CSS?

CSS stands for Cascading Style Sheets. It’s the web-standard for any type of styling and generally offers more versatility over HTML. Although Nuke only supports very basic CSS, so any efforts to try and get box-shadow working or change the size of a node with width will only lead to disappointment.

Back to HTML…

 

Can we add images to things?

You may have opened up a seasoned Compositor’s Nuke script to find their backdrop nodes include images. What sorcery is this??

This is achieved with an <img> tag, like so:

<img src="Roto.png" width="30"> <font color="lime"+>Roto</font>

src is referring to the name & filepath of the image, and width forces the image size (which will just be the image default, if you don’t specify it).

Nuke comes with a default set of icons for all it’s nodes, so when we reference a Node’s Class and add .png to the end, there’s a pretty good chance you’ll get that icon displayed.

You’re also able to add a custom image! If the image is saved in a common directory (like your .nuke directory, or a show’s environment directory), you can pull it in just by using the name:

Image... <img src="greatsuccess.jpg">

Unfortunately, animated gifs remain paused on their first frame… Submit your support tickets to Foundry for the next release of Nuke!

However, when you’re adding images to a gizmo’s property panel, it appears as though you have to be a little more specific & give the full filepath, or add:

nuke.pluginAddPath( './path_to_folder_where_your_image_lives')

to your init.py file…

<img src="C:\Users\Ben\.nuke\specific.png">

You can even make this image a link, if you want to…

<a href="https://lmgtfy.com/?q=specific"><img src="C:\Users\Ben\.nuke\specific.png"></a>

 

And with that, we conclude this quick tutorial.