small caps

B

Ben Gun

Hi there,
I was wondering if anyone came across this one before or how you solve
it.

I am looking for a tag I can use on individual words to display all
but the first letter small. Same as small-caps, only that the word is
already in all-caps.

I have THE BENGAL LEAGUE but in order to use small-caps I would need
The Bengal League.

There is the first-letter pseudohook, but it only works on block-level
tags, not text -level. I can't even use SPAN.

What is the solution?

Thanks, Ben
 
J

Jukka K. Korpela

Scripsit Beauregard T. Shagnasty:
He said "small caps", not "all caps'. <g>

The Subject line _only_ says "small caps", but that's apparently misleading.
It seems to me that the OP has text like "THE BENGAL TIGER" and he wants it
to be displayed as "The Bengal Tiger" using small-caps style (i.e. with
lowercase letters like "a" rendered using shapes similar to the
corresponding uppercase letter though smaller). So there are two distinct
issues here.

In HTML, there's nothing for either purpose. In CSS, you can use
text-transform to convert text to uppercase, to lowercase, or to capitalized
(first letter in capital). The problem in the OP's case is that
text-transform: capitalize does not affect uppercase letters at all - it
only converts the first letter of each word from lower to upper case. (Note
that this isn't the same as title case in English usage: text-transform:
capitalize affects _all_ words, including articles and prepositions.)

Thus, even the first part of the job implies that it cannot be performed in
CSS. The textual content needs to be change - and then you could probably
just as well change it to the desired spelling ("The Bengal Tiger").
Should probably be { font-variant: small-caps; } but I've never been
able to make it work reliably, if at all.

It actually works pretty well technically up to a point. People just often
misunderstand the idea. It's supposed to affect the choice of font variant,
ideally using a small-caps variant of the font. Such a variant has probably
uppercase letters similar to those of the basic font but lowercase letters
as similar to uppercase letters but in a size that is somewhat larger than
the x-height of the basic font. Very few fonts commonly available on
people's computers contain small-caps variants of fonts; such variants
typically exist for quality or "expert" fonts only, used in high-quality
typography.

So what happens in practice is that browsers simulate small-caps by using
reduced-size versions of capital letters. This results in inferior quality,
as yoi can learn from a textbook on typography. To compensate for the
problems, browsers don't reduce the size very much. This, on the other hand,
creates insufficient size contrast between uppercase and lowercase letters,
so that they look rather similar unless you look carefully, i.e. the text
may _appear_ to be in all uppercase.
 
B

Ben Gun

On Tue, 13 Feb 2007 08:09:42 +0200, "Jukka K. Korpela"

Thank you for your replies.
Scripsit Beauregard T. Shagnasty:


The Subject line _only_ says "small caps", but that's apparently misleading.
It seems to me that the OP has text like "THE BENGAL TIGER" and he wants it
to be displayed as "The Bengal Tiger" using small-caps style (i.e. with
lowercase letters like "a" rendered using shapes similar to the
corresponding uppercase letter though smaller).
Yes, that is my problem. The text is already in all-caps, but I want
small-caps. Here is why. The text has been scanned in from a book
where it is small-caps, and the OCR software makes it all-caps. Now, I
would like to display it similar to what it is in the book, i.e.
small-caps. Looks like I can't even convey my problem.

For me it is not so much about all-caps or small-caps, it is more a
question of how to treat the first letter of a word different from the
rest, like with the first-letter pseudothingy, but that only works on
block-level.

e.g.
THE BENGAL TIGER

what I can do is
T<small><small>HE</small></small> B<small><small>ENGAL</small></small>
T<small><small>IGER</small></small>

that looks ok, but the HTML can't be read easily. it would be better
to use style sheets

T<span>HE</span> B<span>ENGAL</span> T<span>IGER</span>

and define the font-size of SPAN to be small or x-small. But I'd
rather tag the whole word (for readability), as in

<div>THE</div> <div>BENGAL</div> <div>TIGER</div>

css:
div{text-transform:lowercase}
div:first-letter{text-transform:capitalize}
or even
div:first-letter{text-transform:uppercase}


That works great, and I would be happy with this, as I usually have
separate words anyway, if it weren't for the line breaks.

Looks like there is no easy way of doing it. At least I know I have
tried and asked you opinion. Thanks again, Ben
 
T

Toby A Inkster

Ben said:
I have THE BENGAL LEAGUE but in order to use small-caps I would need
The Bengal League.

Indeedy, so why don't you?

Why can't you just change it to title-case ("The Bengal League") in the
HTML, and then apply small-caps using CSS?

If you have some sort of allergy to that, then you could use a bit of
Javascript trickery:

<h2 id="foo">THE BENGAL LEAGUE</h2>
<script type="text/javascript">
// http://querylog.com/q/Javascript+converting+string+to+TitleCase
/**
* Extend the native String class to include an array that lists silly
* words that shouldn't be capitalised.
*/
String.noLC = new Object
({the:1, a:1, an:1, and:1, or:1, but:1, aboard:1,
about:1, above:1, across:1, after:1, against:1,
along:1, amid:1, among:1, around:1, as:1, at:1,
before:1, behind:1, below:1, beneath:1, beside:1,
besides:1, between:1, beyond:1, but:1, by:1, 'for':1,
from:1, 'in':1, inside:1, into:1, like:1, minus:1,
near:1, of:1, off:1, on:1, onto:1, opposite:1,
outside:1, over:1, past:1, per:1, plus:1,
regarding:1, since:1, than:1, through:1, to:1,
toward:1, towards:1, under:1, underneath:1, unlike:1,
until:1, up:1, upon:1, versus:1, via:1, 'with':1,
within:1, without:1});

/**
* Extend the native String class with a titleCase function.
*/
String.prototype.titleCase = function ()
{
// Special case for just one word.
if (!this.match(/(\s+)/))
return this.substr(0,1).toUpperCase() + this.substr(1,this.length);

// Multiple words, so split into words, storing whitespace safely.
var gaps = this.match(/(\s+)/g);
var parts = this.split(/\s+/);
if ( parts.length == 0 ) return '';

var fixed = new Array();
for ( var i in parts )
{
var fix = '';
if ( String.noLC[parts] )
fix = parts.toLowerCase();

else if ( parts.match(/^([A-Z]\.)+$/i) ) // will mess up "i.e." and like
fix = parts.toUpperCase();

else if ( parts.match(/^[^aeiouy]+$/i) ) // voweless words are almost always acronyms
fix = parts.toUpperCase();

else
fix = parts.substr(0,1).toUpperCase() +
parts.substr(1,parts.length);

fixed.push(fix);
}

fixed[0] = fixed[0].substr(0,1).toUpperCase() +
fixed[0].substr(1,fixed[0].length);

var out = '';
for ( var i in fixed )
{
if (gaps)
out += fixed + gaps;
else
out += fixed;
}
return out;
}

var foo = document.getElementById('foo');
foo.innerHTML = foo.innerHTML.titleCase();
</script>

--
Toby A Inkster BSc (Hons) ARCS
Contact Me ~ http://tobyinkster.co.uk/contact
Geek of ~ HTML/SQL/Perl/PHP/Python*/Apache/Linux

* = I'm getting there!
 
T

Toby A Inkster

Ben said:
that looks ok, but the HTML can't be read easily. it would be better
to use style sheets

T<span>HE</span> B<span>ENGAL</span> T<span>IGER</span>

Given that you are *already* *modifying* the *HTML*, why not just modify
it to this:

<div style="font-variant:small-caps">The Bengal Tiger</div>

--
Toby A Inkster BSc (Hons) ARCS
Contact Me ~ http://tobyinkster.co.uk/contact
Geek of ~ HTML/SQL/Perl/PHP/Python*/Apache/Linux

* = I'm getting there!
 
J

J.O. Aho

Ben said:
On Tue, 13 Feb 2007 08:09:42 +0200, "Jukka K. Korpela"

Thank you for your replies.

Yes, that is my problem. The text is already in all-caps, but I want
small-caps. Here is why. The text has been scanned in from a book
where it is small-caps, and the OCR software makes it all-caps. Now, I
would like to display it similar to what it is in the book, i.e.
small-caps. Looks like I can't even convey my problem.

For me it is not so much about all-caps or small-caps, it is more a
question of how to treat the first letter of a word different from the
rest, like with the first-letter pseudothingy, but that only works on
block-level.

Can't you just process the text once more, perl should give you the tool
manipulate the raw texts to a more normal format before you inject HTML into it.
 
J

Jonathan N. Little

Ben said:
On Tue, 13 Feb 2007 08:09:42 +0200, "Jukka K. Korpela"

Thank you for your replies.

Yes, that is my problem. The text is already in all-caps, but I want
small-caps. Here is why. The text has been scanned in from a book
where it is small-caps, and the OCR software makes it all-caps. Now, I
would like to display it similar to what it is in the book, i.e.
small-caps. Looks like I can't even convey my problem.

Looks like you are making this needlessly complicated. If you are using
OCR that is transforming the text to all caps, you must be saving the
text as a text file before incorporating in in your web page; just open
with a word processor: Select All > Format > Change Case > Sentence Case.

Or as was suggested preprocess with a script like Perl
 
B

Ben Gun

Indeedy, so why don't you?

Because
a) I have got hundreds of the buggers.
b) because I want to be able to extract a text-only verison EASILY
from the html. And this time, I want all-caps (as it already is).

<...snip...>

Thank you for you suggestions. I have altered your functiona bit so as
to turn the words lowercase, because that is what I would need to give
it small-cap style.

While this works, I don't want to run javascript on every page, you
know how these browsers are these days, they ask you every time if it
is ok.

Ben
 
B

Ben Gun

Given that you are *already* *modifying* the *HTML*, why not just modify
it to this:
<div style="font-variant:small-caps">The Bengal Tiger</div>

Because I would like it uppercase in the HTML, but display as if it
were small-caps. Also, div is block-level, would not work in the
middle of a sentence.

Thanks,

Ben
 
B

Ben Gun

Can't you just process the text once more, perl should give you the tool
manipulate the raw texts to a more normal format before you inject HTML into it.

That is probably what I will have to do, and I have no problem with
that. I was just asking in case there is an easy work-around.

Thanks, Ben
 
B

Ben Gun

Looks like you are making this needlessly complicated. If you are using
OCR that is transforming the text to all caps, you must be saving the
text as a text file before incorporating in in your web page; just open
with a word processor: Select All > Format > Change Case > Sentence Case.
It is only some proper names within the text that need to be
small-caps. Converting them all to 'capitalize' (and then small-cap)
does the trick. However, I was wondering if there was a way to keep
them uppercase. That's all.

Thank you, Ben
 
T

Toby A Inkster

Ben said:
While this works, I don't want to run javascript on every page, you
know how these browsers are these days, they ask you every time if it
is ok.

None of mine ask.

--
Toby A Inkster BSc (Hons) ARCS
Contact Me ~ http://tobyinkster.co.uk/contact
Geek of ~ HTML/SQL/Perl/PHP/Python*/Apache/Linux

* = I'm getting there!
 
B

Bergamot

Ben said:
Because I would like it uppercase in the HTML

Semantically, that's incorrect. All caps usually signifies acronyms,
which this most definitely is not. The text should be normal title case
in the HTML. You can style it however you like with CSS.
 
B

Ben Gun

Semantically, that's incorrect. All caps usually signifies acronyms,
which this most definitely is not. The text should be normal title case
in the HTML. You can style it however you like with CSS.

I know. Eventually I will do that.

Since we're on the point, what do small caps signify? Why would
anybody use small caps? In my book it is proper names, but the text is
not consistent. The reason I am asking is, what would be the right why
to represent this in plain vanilla ASCII?

Cheers, Ben
 
B

Ben Gun

None of mine ask.

Hi Toby, I just had a look at my website statistics, 93% are windows
users, 76% use MS Internet Explorer. I know for a fact that this
particular browser as a safeguard asks if it is ok to run javascript.
Thanks for your code.

Ben
 
J

Jukka K. Korpela

Scripsit Ben Gun:
Since we're on the point, what do small caps signify? Why would
anybody use small caps?

They have been used for centuries in print typography for purposes like
a) highlighting the first few words of text, for more or less ornamental
reasons
b) some types of headings
c) names of authors in bibliographies
d) emphasis in contexts where different kinds of emphasis (italics, bolding,
etc.) are needed.

The main reason for avoiding small caps in HTML is the implementation flaws
I mentioned: font-variant: small-caps does not result in real small caps but
in reduced-size uppercase letters. Typically,
<span style="font-variant:small-caps">Foobar</span>
gives (much) the same rendering as
F<small>OOBAR</small>
though with the latter, you can use CSS to affect the font size of <small>,
thereby creating a better contrast between uppercase and lowercase.
 
B

Beauregard T. Shagnasty

Ben said:
.. I know for a fact that this particular browser as a safeguard asks
if it is ok to run javascript.

I'm sure that is an option you can fiddle with...

In all my Mozilla browsers, I have the PrefBar toolbar with a
[ ] JavaScript checkbox (among others).
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,995
Messages
2,570,233
Members
46,820
Latest member
GilbertoA5

Latest Threads

Top