small caps

Discussion in 'HTML' started by Ben Gun, Feb 12, 2007.

  1. Ben Gun

    Ben Gun Guest

    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
    Ben Gun, Feb 12, 2007
    #1
    1. Advertising

  2. Ben Gun

    Bergamot Guest

    Bergamot, Feb 13, 2007
    #2
    1. Advertising

  3. Ben Gun

    Bergamot Guest

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


    I didn't notice this part before.

    You should write it in normal case, not all caps. If you want it shown
    in all caps then use the text-transform property to change the presentation.
    http://www.w3.org/TR/CSS21/text.html#propdef-text-transform

    --
    Berg
    Bergamot, Feb 13, 2007
    #3
  4. Bergamot wrote:

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

    >
    > I didn't notice this part before.
    >
    > You should write it in normal case, not all caps. If you want it shown
    > in all caps then use the text-transform property to change the presentation.
    > http://www.w3.org/TR/CSS21/text.html#propdef-text-transform


    He said "small caps", not "all caps'. <g>

    Should probably be { font-variant: small-caps; } but I've never been
    able to make it work reliably, if at all.

    --
    -bts
    -Motorcycles defy gravity; cars just suck
    Beauregard T. Shagnasty, Feb 13, 2007
    #4
  5. 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.

    --
    Jukka K. Korpela ("Yucca")
    http://www.cs.tut.fi/~jkorpela/
    Jukka K. Korpela, Feb 13, 2007
    #5
  6. Ben Gun

    Ben Gun Guest

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

    Thank you for your replies.

    >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).

    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
    Ben Gun, Feb 13, 2007
    #6
  7. Ben Gun wrote:

    > 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!
    Toby A Inkster, Feb 13, 2007
    #7
  8. Ben Gun wrote:

    > 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!
    Toby A Inkster, Feb 13, 2007
    #8
  9. Ben Gun

    J.O. Aho Guest

    Ben Gun wrote:
    > On Tue, 13 Feb 2007 08:09:42 +0200, "Jukka K. Korpela"
    > <> wrote:
    >
    > Thank you for your replies.
    >
    >> 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).

    > 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.


    --

    //Aho
    J.O. Aho, Feb 13, 2007
    #9
  10. Ben Gun wrote:
    > On Tue, 13 Feb 2007 08:09:42 +0200, "Jukka K. Korpela"
    > <> wrote:
    >
    > Thank you for your replies.
    >
    >> 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).

    > 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

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Feb 13, 2007
    #10
  11. Ben Gun

    Ben Gun Guest

    On Tue, 13 Feb 2007 10:39:01 +0000, Toby A Inkster
    <> wrote:

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

    >
    >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
    Ben Gun, Feb 13, 2007
    #11
  12. Ben Gun

    Ben Gun Guest

    On Tue, 13 Feb 2007 11:04:11 +0000, Toby A Inkster
    <> wrote:

    >Ben Gun wrote:
    >
    >> 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>


    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
    Ben Gun, Feb 13, 2007
    #12
  13. Ben Gun

    Ben Gun Guest

    On Tue, 13 Feb 2007 12:17:14 +0100, "J.O. Aho" <>
    wrote:

    >Ben Gun wrote:
    >> On Tue, 13 Feb 2007 08:09:42 +0200, "Jukka K. Korpela"
    >> <> wrote:
    >>
    >> Thank you for your replies.
    >>
    >>> Scripsit Beauregard T. Shagnasty:
    >>>

    >> 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.


    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
    Ben Gun, Feb 13, 2007
    #13
  14. Ben Gun

    Ben Gun Guest

    On Tue, 13 Feb 2007 08:41:37 -0500, "Jonathan N. Little"
    <> wrote:

    >Ben Gun wrote:
    >> On Tue, 13 Feb 2007 08:09:42 +0200, "Jukka K. Korpela"
    >> <> wrote:
    >>

    >
    >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
    Ben Gun, Feb 13, 2007
    #14
  15. Ben Gun wrote:

    > 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!
    Toby A Inkster, Feb 13, 2007
    #15
  16. Ben Gun

    Bergamot Guest

    Ben Gun wrote:
    > On Tue, 13 Feb 2007 11:04:11 +0000, Toby A Inkster
    > <> wrote:
    >
    >>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


    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.

    --
    Berg
    Bergamot, Feb 13, 2007
    #16
  17. Ben Gun

    Ben Gun Guest

    On Tue, 13 Feb 2007 11:10:30 -0600, Bergamot <>
    wrote:

    >Ben Gun wrote:
    >> On Tue, 13 Feb 2007 11:04:11 +0000, Toby A Inkster
    >> <> wrote:
    >>
    >>>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

    >
    >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
    Ben Gun, Feb 13, 2007
    #17
  18. Ben Gun

    Ben Gun Guest

    On Tue, 13 Feb 2007 16:29:43 +0000, Toby A Inkster
    <> wrote:

    >Ben Gun wrote:
    >
    >> 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.


    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
    Ben Gun, Feb 13, 2007
    #18
  19. 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.

    --
    Jukka K. Korpela ("Yucca")
    http://www.cs.tut.fi/~jkorpela/
    Jukka K. Korpela, Feb 13, 2007
    #19
  20. Ben Gun wrote:

    > .. 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).

    --
    -bts
    -Motorcycles defy gravity; cars just suck
    Beauregard T. Shagnasty, Feb 13, 2007
    #20
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Mikael Petterson

    xsl syntax to generate all caps with _

    Mikael Petterson, Sep 10, 2003, in forum: XML
    Replies:
    3
    Views:
    896
    Dimitre Novatchev
    Sep 11, 2003
  2. Malcolm

    Caps convention.

    Malcolm, Dec 20, 2003, in forum: C Programming
    Replies:
    20
    Views:
    1,000
    Mark McIntyre
    Dec 21, 2003
  3. Kyle E
    Replies:
    6
    Views:
    257
    Kyle E
    Oct 28, 2003
  4. Merrigan
    Replies:
    4
    Views:
    558
    Chris
    Dec 14, 2007
  5. Samuel van Laere

    Capital or small caps

    Samuel van Laere, Jun 13, 2009, in forum: HTML
    Replies:
    4
    Views:
    1,270
    Harlan Messinger
    Jun 14, 2009
Loading...

Share This Page