CSS to Approximate a Telegram?

[JSWolf]

Originally Posted by Turtle91

You are incorrect Jon.

Please take the time to actually read what was written previously before making these blanket statements that are demonstrably false.

Here's an exercise for you:

Show us the html you would use to create the following (make sure you keep the difference in font size between the upper and lower case letters) and you must use the upper-case glyph for all the lower-case letters:

"Now Is The Time For All Good Men To Come To The Aid Of Their Countries."

Here's mine:

.sc {font-variant:small-caps}

<p class="sc">Now Is The Time For All Good Men To Come To The Aid Of Their Countries.</p>

Yes your code will work. But try this. You will not get small-caps.

.sc {
  font-variant: small-caps;
}

<p class="sc">NOW IS THE TIME FOR ALL GOOD MEN TO COME TO THE AID OF THEIR COUNTRIES.</p>

But the following code will work.

.sc {
  font-variant: small-caps;
  text-transform: lowercase;
}

<p>N<span class="sc">OW</span> I<span class="sc">S</span> T<span class="sc">HE</span> T<span class="sc">IME</span> F<span class="sc">OR</span> A<span class="sc">LL</span> G<span class="sc">OOD</span> M<span class="sc">EN</span> T<span class="sc">O</span> C<span class="sc">OME</span> T<span class="sc">O</span> T<span class="sc">HE</span> A<span class="sc">ID</span> O<span class="sc">F</span> T<span class="sc">HEIR</span> C<span class="sc">OUNTRIES</span>.</p>

[phillipgessert]

I believe the result of both of those would be the same, and once hard caps exist in the markup they aren’t fixable via CSS. You can go lower to upper but not the reverse. So, adding text-transform wouldn’t help either. You’ll get all caps (no small caps) either way.

[JSWolf]

Originally Posted by phillipgessert

I believe the result of both of those would be the same, and once hard caps exist in the markup they aren’t fixable via CSS. You can go lower to upper but not the reverse. So, adding text-transform wouldn’t help either. You’ll get all caps (no small caps) either way.

You do need a text-transform: lowercase; if the letters are uppercase because they will stay that way without,

Try the code in the last code block. remove the text-transform and watch it no longer work.

[phillipgessert]

I'll be darned. Not sure where I got the idea that text-transform: lowercase didn't work against hard caps.

[Turtle91]

Originally Posted by JSWolf

You do need a text-transform: lowercase; if the letters are uppercase because they will stay that way without,

Try the code in the last code block. remove the text-transform and watch it no longer work.

And that is where the problem lies.

You assume that the phrase will be listed in ALL UPPERCASE...thus you are forcing them to lowercase so you can apply a small-caps. You can get the same result if you just applied a smaller font-size to the all caps.

small-caps does work when it is applied to a phrase that has upper and lower case letters. Telling people that they MUST ALWAYS apply text-transform:lowercase is not correct. Doing so will lose the ability to distinguish between capital and lowercase letters...they will all be the same size...

It is soooo much nicer and cleaner code to have this:

.sc {font-variant:small-caps}

<p class="sc">Now Is The Time For All Good Men To Come To The Aid Of Their Countries.</p>

than this:

.sc {
  font-variant: small-caps;
  text-transform: lowercase;
}

<p>N<span class="sc">OW</span> I<span class="sc">S</span> T
<span class="sc">HE</span> T<span class="sc">IME</span> F
<span class="sc">OR</span> A<span class="sc">LL</span> G
<span class="sc">OOD</span> M<span class="sc">EN</span> T
<span class="sc">O</span> C<span class="sc">OME</span> T
<span class="sc">O</span> T<span class="sc">HE</span> A
<span class="sc">ID</span> O<span class="sc">F</span> T
<span class="sc">HEIR</span> C<span class="sc">OUNTRIES</span>.</p>

don't you think??

And, yes Jon, the normal caveats about the app/device supporting the functionality still apply...


When I come across text that is written in ALL CAPS and I want to display them using small-caps, I take the little bit of extra time to convert the ALL CAPS to either all lowercase or, most often, mixed case I don't leave them as ALL CAPS and then do a double transform in the CSS and add all those additional <span>s....it's just cleaner coding and makes the html easily readable.

As always, you can do it however you want to. I just have to interrupt when you say people MUST do it your way.

Cheers,

[Tex2002ans]

Originally Posted by Turtle91

Smallcaps can be used with lowercase AND uppercase letters - and the uppercase glyph is used while still maintaining a font-size difference.

Exactly.

Originally Posted by Turtle91

It is also using a font that looks like a telegram or an old typewriter.

It looks really nice actually!

It was straight out of a 1913 book (PDF)!

Originally Posted by Hitch

What is it precisely that you're demo'ing here, Tex?

Earlier in the thread there was some bad info going on about "all lowercase" smallcaps.

Originally Posted by phillipgessert

I'll be darned. Not sure where I got the idea that text-transform: lowercase didn't work against hard caps.

As always, MDN is a fantastic resource:

• MDN: "text-transform"

They even do a great job explaining all the localization issues. (Not all languages capitalize the same!)

If you want all the technical details, as always, the specs explain even more:

• CSS Text Module Level 3: "text-transform"

Originally Posted by JSWolf

Yes your code will work. But try this. You will not get small-caps.

I don't get what the heck you're trying to even get across. But I think it's because there needs to be concrete examples/screenshots.

This is the way I see it.

Here are 4 different "methods" of doing smallcaps:



Generated using this code (or see attached EPUB):

Spoiler:

HTML:

  <p><span class="sc1">NOW IS THE TIME FOR ALL GOOD MEN TO COME TO THE AID OF THEIR COUNTRIES.</span></p>

  <p>N<span class="sc2">OW</span> I<span class="sc2">S</span> T<span class="sc2">HE</span> T<span class="sc2">IME</span> F<span class="sc2">OR</span> A<span class="sc2">LL</span> G<span class="sc2">OOD</span> M<span class="sc2">EN</span> T<span class="sc2">O</span> C<span class="sc2">OME</span> T<span class="sc2">O</span> T<span class="sc2">HE</span> A<span class="sc2">ID</span> O<span class="sc2">F</span> T<span class="sc2">HEIR</span> C<span class="sc2">OUNTRIES</span>.</p>

  <p><span class="sc3">Now Is The Time For All Good Men To Come To The Aid Of Their Countries.</span></p>

  <p><span class="sc3">Now Is the Time for All Good Men to Come to the Aid of Their Countries.</span></p>

CSS:

p {
  font-family: "Liberation Serif", serif;
}

.sc1 {
  font-variant: small-caps;
}

.sc2 {
  font-variant: small-caps;
  text-transform: lowercase;
}

.sc3 {
  font-variant: small-caps;
}

(I only chose Liberation Serif because I know it has a high-quality smallcaps variant.)

• 1 = ALL CAPS
• 2 = lowercase text-transform
  
  • Similar to F<small>AKE</small> C<small>APS</small>
• 3 = small-caps
• 4 = small-caps + manual Title Casing

If you want to keep smallcaps in your ebooks, what you should aim for is 3 or 4.

If, like Quoth said, you have oddities—like shrunken acronyms: "AM/PM", "NATO", or "FBI"—then it's up to you to decide what you want:

Spoiler:

HTML:

<p>I worked for the FBI.</p>

<p>I worked for the <span class="sc2">FBI</span>.</p>

<p>I worked for the <span class="sc">fbi</span>.</p>

But, let it be known:

This text-transform shenanigans won't work on Adobe Digital Editions (4.5):



so I would not rely on it for maximum compatibility.

Which is why, yet again, I recommend:

• ALL CAPS acronyms
• Title Case text as needed.
• Apply <span class="smallcaps"> as needed.
  
  • (Version 3 or 4 above.)

Those devices that have proper small-caps support/fonts will display great.

Those that don't will still have a readable EPUB too!

- - -

Side Note: Acronyms are maybe the only case I could see JSWolf's text-transform being applicable.

But, personally, I wouldn't go through all the trouble of tagging every acronym with markup.

Side Note #2: If you did need to tag all acronyms though...

Have I told you about the great way to use Spellcheck Lists?

Similar to my "mark all foreign words" trick, you can:

• Use "Change Selected Word To:"
• FBI -> @FBI@
• Use regex to convert to <span class="smallcaps">FBI</span>

[JSWolf]

@Turtle91 you are missing the point.

Let's say you have an ePub that has lots of smallcaps such as a Discworld book featuring Death. Death speaks in smallcaps. In the eBook, you have the text as uppercase with spans to apply a smaller font size. Now if you are using a font that supports smallcaps and text-transform and you want to read with proper smallcaps, then why would you spend the time and effort to convert the text to lowercase when the text-transform will do it? All you have to do is add the text-transform and change the font size to a font-variant and you will have proper smallcaps. It's that easy.

So if I was going to read this eBook in KePub on my Libra 2, I would have smallcaps without needing to convert the uppercase to lowercase. And if I ever decided to read this eBook with a program that did not support smallcaps, I could take out the text-transform line and change the font-variant to font-size and I'm good to go.

That's why it's better to use uppercase for smallcaps then it is to use lowercase. You have options that way that work without the hassle of converting case.

[Turtle91]

Personally I would just use a couple very simple regex to convert the ALL CAPS to sentence case (or Mixed Case) then apply small-caps. But that is just me.

If you want all that dialogue to be in lowercase small caps then go for it! You have my blessing... you see...I really don't care what you do to your books. I care about the fact that you are trying to tell people here on these forums incorrect information. You think that all small caps everywhere has to look the way you make DEATH talk..... and that dog don't hunt!

[Tex2002ans]

Originally Posted by Turtle91

Personally I would just use a couple very simple regex to convert the ALL CAPS to sentence case (or Mixed Case) then apply small-caps. But that is just me.

Yep.

The other method has 95% of the same disadvantages as F<small>AKE</small> C<small>APS</small>.

It's only better because you see some proper smallcap letters!

But you get all the mess with:

• red squigglies
• impossible-to-read code
• a lot more chances to introduce errors
  
  • Don't ask me how many times I've seen T<small>YPO'S</small> in captions.
    
  • (I'd be able to afford to purchase my own M<small>C</small>D<small>ONALDZ</small>!)
    
  • (And captions are only a handful of words! I can't imagine an entire book full of D<small>IE-UH-LOG</small>!)
    
• ...

And if you're already going through creating all that disgusting markup... why not just substitute in one of our lowercasing/titlecasing regexes and fix the text itself!

Clean, crisp, maintainable code... always the right decision!

[JSWolf]

And if you want to re-read the eBook in say ePub on a Kobo, you'd have to change the case back to uppercase in order to have it work with simulated smallcaps.

[Turtle91]

This is NOT about making this available on a wide range of devices/apps. The OP very specifically stated that it was for their own personal use on their own device which supports this functionality...

All Kobos are quite happy to render font-variant:small-caps; as long as your book is a kepub (i.e. everything Kobo sells). The small-caps will be 'simulated' from the font currently in use rather than a true small-caps font.

If the OP wanted to read the book as an ePub on his Kobo, then your technique of forcing lowercase on the entire phrase before applying small-caps still wouldn't work...according to you, they would "have to change the case back to uppercase in order to have it work with simulated smallcaps."

Your statements seem to argue against your own previous statements...you keep saying that small-caps ONLY works on lowercase...now you are saying they would all need to be uppercase???


Anyway...I am also officially DUN with this particular argument. Cheers!

[JSWolf]

Originally Posted by Turtle91

This is NOT about making this available on a wide range of devices/apps. The OP very specifically stated that it was for their own personal use on their own device which supports this functionality...

All Kobos are quite happy to render font-variant:small-caps; as long as your book is a kepub (i.e. everything Kobo sells). The small-caps will be 'simulated' from the font currently in use rather than a true small-caps font.

If the OP wanted to read the book as an ePub on his Kobo, then your technique of forcing lowercase on the entire phrase before applying small-caps still wouldn't work...according to you, they would "have to change the case back to uppercase in order to have it work with simulated smallcaps."

Your statements seem to argue against your own previous statements...you keep saying that small-caps ONLY works on lowercase...now you are saying they would all need to be uppercase???


Anyway...I am also officially DUN with this particular argument. Cheers!

What I am saying is that if the text is uppercase, it needs to be lowercase in order to be made smallcaps. So if the eBook originally used a font size to make the smallcaps from uppercase, then you need the text transform to make the text lower case so it can be smallcaps. If the text is a combination of upper and lowercase and that's how you want it for the smallcaps, then you don't need the text transform. It's that simple.

[Quoth]

Or only do small caps on paper and just use caps. Especially for a telegram, Apple II display etc even on paper. Sometimes small caps are wrong and you can't ensure they always work on ebooks, only PDF and paper.

[theducks]

I have a family scrapbook with real Telegrams. There is only ONE case.

(Side note: My dad was a CW Ham Radio operator. He had a Smith Corona (referred to as a 'mill') with NO lower case. Shift just accessed the symbols, Both Upper and Lower positions on the type hammers were CAPS. Morse code has no 'case'.)