All Small Caps typography setting

I Need Help
1

Hi I need to be able to style a portion of my text with the All Small Caps setting, which is the opentype setting available to some fonts. Not the All Caps setting. There is no way to do that in a regular class. It seems that it is a hand-coded CSS setting such as

(as a .CSS document)
@charset “UTF-8”;
/* CSS Document */
.all-small-caps {
font-variant-caps: all-small-caps;
font-style: normal;
}

I try adding this to the page setting as a CSS document attachment.

or as a style tag and code block:

.all-small-caps { font-variant-caps: all-small-caps; font-style: normal; }

I add the above to the Code/Window area

The issue is that none of this works. I try accessing all-small-caps or .all-small-caps from the class manager and it’s not there. If I create new class all-small-caps in the normal text class area still nothing happens.

Please let me know where this is supposed to go and how to access a class that I’ve created.

2

Hello @abarkalo,

You have to do 2 things:
1st. In page settings add the folowing code:

<style>
p.small {
  font-variant: small-caps;
} 
</style>

2nd. In the html that you are writing just add to the paragraph that you want the following class: small

image
image2064×290 23.7 KB

image

Hope it helps you…

3

Hi Alex,

I have sent you an email with a solution a few hours ago. Basically the same as @pealco suggest here.

You can also add code using the Code Editor.

4

Eldar - yes I tried this but the added code doesn’t do anything. The class I created with this code doesn’t appear - I think that’s the main issue. So when I type small in the class window (picture shown above) I believe I’m simply creating a new class with nothing in it.

5

I have not been have to make any code work - do I add as an attachment as a .CSS doc, or add the text to the Page/Option header or footer or do I add as code in Code/Window as Eldar has suggested? When I do any number of these things that class - whether it’s .p-small or .small or small (dotless syntax?) - nothing shows up in the class manager.

As a workaround I am spanning part of some paragraph text and am using the small caps in the UI window, then I’m reducing the size of the font to create small- small caps as a fake all small caps. It’s ok but not exactly the same thing and it creates spacing gaps which I have to manually fix. What I’m after is the all small caps like like Wired or Time Magazine have - love that style.

Appreciate the help.

6

First of all where you have the text have to be a paragraph, so you add a paragraph brick:

image
image752×866 51.9 KB

Then in page preferences, in “Add Code”:

image
image796×1332 61.4 KB

Just add the following code in the Header place:

<style>
p.small {
  font-variant: small-caps;
} 
</style>

image
image1380×582 47 KB

Then you add the class: small to the paragraph you add before:

image
image1380×192 12.5 KB

About how @Eldar told you I don’t know, but if he explain you how it should work…

7

Thanks for all your help with this. I greatly appreciate it. However, I honestly don’t know what I’m doing wrong (and I do know how to do basic coding) but the issue here is that either the CSS stylings in Blocs are different or with a different syntax or somehow the .small class (entering as “small”) isn’t picking up the code. This does work in Dreamweaver and other code editors just not here.

8

@abarkalo, please try one thing:
Add a bric html,
And insert the following code please:

<style>
p.small {
      font-variant: small-caps;
}
</style>
<p class="small">This paragraph should be in SMALL CaPs.</p>

Check if in this way it works
Check in the page preferences how you have the options to export, I don’t have minimize in anything…

9

FYI The small caps only show up when you preview the page not in design view.
So it will seem like nothing is happening in design view until the page is either previewed or show in web browser Command + Option + B