Word space CSS for Typeface

[Jimmy]

L.S.

Does anyone have CSS code to set the word spacing in Typeface? If so, where would I place the code?

Thanks,

Jim

[elixirgraphics]

So I don’t like to do custom code as I don’t have the time it would take to be responsible for helping users maintain it down the line. As a one man operation it would be a strain. That said, I’d much rather teach someone to grow their own apples rather than just give them a bushel. So, let’s look at how we can get some of the information you’ll need to write your own custom CSS. (Note: You’ll need to look up and write your own CSS. This guide will just aid you in finding out what you need to apply it to).

In RapidWeaver you can enable a very cool tool, that I use every, single day – and that is the “Developer Tools.” Now while this might sound like something only good for developers, it is also useful to users wanting to write their own custom code.

You can enable this feature in the RW Preferences, here:

Once enabled you’ll be able to access the Inspect Elements tool. Preview a page, and then right click on an element, say a Header stack in this case:

When you click Inspect Element you’ll get this funky window:

You’ll see there, in all that code a highlighted row. That is what we inspected. You’ll notice it is an <h2> tag. That is what we want to target with our custom CSS. But, it doesn’t really have a specific enough class name for us to do so without affecting every other Header on the page.

So, there’s two things we can do. We can add a class somewhere that will help us target this more specifically, or look for one that will let us do so.

When we set a Header, for example, to use a specific Typeface it will get a new class. So let’s set the Header stack to use Typeface 1…

… and then Inspect the element …

You’ll see it has been assigned a new class: foundry-typeface-one

If you want to apply your custom CSS for applying a custom word spacing to all text using the foundry-typeface-one class, then we could target that class and the custom word spacing would be applied to everything using Typeface 1.

h2.foundry-typeface-one {
    /* your custom css goes below */
   custom code
}

Now what if we just want to target one specific item on a page though? If you don’t want to affect all elements that might be using Typeface 1 in this example you could add your own class to target. Stacks provides a great way to do this. Each stack includes a Custom CSS Class field. Let’s keep looking at that Header we’ve been working with:

You’ll see in the settings we can add our own class name, highlighted in red.

So let’s create something unique and see how it is applied in the code using the Inspect Element developer tool. Let’s call the class custom-word-spacing since that is what you’re looking to do.

Now let’s see where that is applied in our code:

You’ll see that the class has been applied to a <div> (the first highlighted line) that is wrapped around our <h2> tag. So we need to target it a little differently this time around. We need to target things more specifically:

.custom-word-spacing h2.foundry-typeface-one {
    /* your custom css goes below */
   custom code
}

Where do you put this custom code in RapidWeaver though? You can put it in one of two places. This first option affects all pages – You can place it in the Overarching Code section in RapidWeaver:

Where do you put this custom code in RapidWeaver though? You can put it in one of two places. In the Overarching Code section in RapidWeaverWhere do you put this custom code in RapidWeaver though? You can put it in one of two places. This first option affects all pages – You can place it in the Overarching Code section in RapidWeaver:

This puts your custom CSS onto every page. If you want to only affect one specific page however you can use the aptly named Page Inspector, here:

Hope this helps you, and others in navigating both how to find the correct class(es) to apply your custom CSS to and where to place the custom code you write.

[Jimmy]

Very interesting! Thank you. Really cool stuff.

I will definitely give this a try as soon as I can either write the CSS code myself (I currently have zero CSS coding skills and have no idea where to even begin to learn to write it - I suspect it would take me months, if not years, of dedication to the cause ) or somebody following this thread is willing and able to share the code I need here (I am secretly hoping for that ).

[elixirgraphics]

What you’re after is pretty easy. Promise. That is why I helped with the harder part, above. Do a bit of googling for CSS Word Spacing.

[Jimmy]

I have been busy with other stuff all week but on this Sunday morning I went for it and I got it to work in one go! Thank you for your clear explanations and great support.

[elixirgraphics]

Not a problem. And it probably felt a hell of a lot better to do that than to take code that one of us wrote for you. Additionally you’ll now know how that code works and can adjust / fix problems with it down the line.