How can I make the first few words in a short block of text appear in italics and small caps without using a span tag?

Question

I have a bunch of images that are numbered in the caption beneath the image, as in “Fig. 1” (short for Figure), “Fig. 2”, “Fig. 3”, etc., followed by a short description on the same line. Is there a way to use CSS or tell Javascript to find these strings (the “Fig. #” only) and style them with italics and small caps? I’d rather do that than have to create a span tag for each and every one.

body {
    counter-reset: figcaption;
    counter-increment: 1;
    }
figcaption:before {
  counter-increment: figcaption;
  font-variant: small-caps;
  font-style: italic;
  content: "Fig. " counter(figcaption) " ";
}
#gallery {
    width: 360px;  
    height: 3600px;
    float: left;
    background-color: #F8F1D4;
}
IMG.displayed {
    display: block;
    margin-left: auto;
    margin-right: auto 
    }
.imageBlockLeft {
    padding: 10px 0px 10px 20px;
    width: 150px;
    float: left;
    }    
.imageBlockRight {
    padding: 10px 20px 10px 0px;   
    width: 150px;
    float: right;
    }
.imageBlockFloatLeftClearLeft {
    clear: left;
    float: left;
    padding: 10px 0 10px 20px;
    width: 150px;
}
.imageBlockLeft p:nth-child(2n+2) {
    font-family: "jaf-bernina-sans-narrow";
    font-size: .8em;
    line-height: 18px;
    border-bottom: 1px solid black;
    background-color: #F8F1D4;
    }
.imageBlockRight p:nth-child(2n+2) {
    font-family: "jaf-bernina-sans-narrow";
    font-size: .8em;
    line-height: 18px;
    border-bottom: 1px solid black;
    background-color: #F8F1D4;
    }
.imageBlockFloatLeftClearLeft p:nth-child(2n+2) {
    font-family: "jaf-bernina-sans-narrow";
    font-size: .8em;
    line-height: 18px;
    border-bottom: 1px solid black;
    background-color: #F8F1D4;
    counter-increment: figcaption;
    font-variant: small-caps;
    font-style: italic;
    content: "Fig. " counter(figcaption) " ";
    }
.captionFull {
    float: left;
    margin: 0px 10px;
    padding: 0px 20px;   
    font-family: "jaf-bernina-sans-narrow";
    font-size: .8em;
    line-height: 18px;
    border-bottom: 1px solid black;
    background-color: #F8F1D4;
    }
.captionFull  p {
    padding: 0px;
    margin: 0px;
    }
p.centerHover {
    font-family: "jaf-bernina-sans-narrow";
    font-size: .9em;
    line-height: 20px;
    padding: 0 1em 0;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    width: 16em;
    text-align: center;
    }
h1 {
    font-size: 1.2em;
    font-variant: small-caps;
    text-align: center;
    padding-top: 9px;
    padding-bottom: 11px;
    border-top: 2px solid #E3A300 !important;
    border-bottom: 2px solid #E3A300 !important;
    }
/*THIS AFFECTS THE SPEED OF THE ZOOM*/
.img-zoom {
    width: 150px;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    }
/*THIS AFFECTS THE SIZE OF THE ZOOM*/
.transition {
    -webkit-transform: scale(4.5); 
    -moz-transform: scale(4.5);
    -o-transform: scale(4.5);
    transform: scale(4.5);
    }

<div id="gallery">
                <h1>Image Gallery</h1>
                <p class="centerHover">Hover over images to enlarge.</p>
                    <div class="imageBlockLeft"><p><img class="img-zoom" src="_images/pg_p_lewis_robert_e.jpg" alt="lewis land warrant" width="148" height="195"></p>
                        <figcaption>My great-grandfather, Robert Ewing Lewis, ca. 1908.</figcaption></div>
                    <div class="imageBlockRight"><p><img class="img-zoom" src="_images/pg_p_lewis_gene.jpg"  width="148" height="184"></p>
                        <figcaption>My grandfather, Eugene Barton Lewis, ca. 1926.</figcaption></div>
                    <div class="imageBlockFloatLeftClearLeft"><p><img class="img-zoom" src="_images/pg_p_lewis_jim.jpg" width="149" height="225"></p>
                        <figcaption>My father, James Edward Lewis, ca. 1959.</figcaption></div>
                    <div class="imageBlockRight"><p><img class="img-zoom" src="_images/pg_p_lewis_4_generations.jpg"  width="143" height="104"></p>
                        <figcaption>Four generations:  Thompson Price Lewis, Robert Ewing Lewis holding James Edward Lewis, Eugene Barton Lewis, Jan 1939.</figcaption></div>
                    <div class="imageBlockFloatLeftClearLeft"><p><img class="img-zoom" src="_images/pg_p_lewis_alex_17981019_ky_christian_war_1197.jpg"  width="140" height="143"></p>
                        <figcaption>Alexander Lewis's warrant #3663 to survey 200 acres of "second rate land" on the west fork of Pond River, dated 19 Oct 1798.</figcaption></div>
                    <div class="imageBlockRight"><p><img class="img-zoom" src="_images/pg_p_lewis_alex_17990212_ky_christian_sur_1197.jpg" class="img-thumbnail" alt="lewis land survey" width="147" height="256"></p> 
                        <figcaption>Alexander Lewis's survey #1197 dated 12 Feb 1799 for warrant #3663.</figcaption></div>
                    <div class="imageBlockLeft"><p><img class="img-zoom" src="_images/pg_p_lewis_alex_18050501_ky_christian_trn_1197.jpg" class="img-thumbnail" alt="lewis land transfer" width="146" height="256"></p>
                        <figcaption>Alexander Lewis transferred his survey #1197 to Benjamin P Campbell on 1 May 1805.  Campbell transferred it to Smith Lofland on 13 Nov 1806.</figcaption></div>
                    <div class="imageBlockRight"><p><img class="img-zoom" src="_images/pg_p_lewis_alex_&_robt_18020809_ky_christian_war_14849.jpg"  width="143" height="118"></p>
                        <figcaption>Robert Lewis's warrant #725 for 200 acres dated 9 Aug 1802.</figcaption></div>
                    <div class="imageBlockLeft"><p><img class="img-zoom" src="_images/pg_p_lewis_alex_&_robt_18051217_ky_christian_war_14849_obv.jpg"  width="143" height="121"></p>
                        <figcaption>Robert Lewis transferred warrant #725 to his father on 17 Dec 1805.</figcaption></div>
                    <div class="imageBlockLeft"><p><img class="img-zoom" src="_images/pg_p_lewis_smith_lofland_v_heirs_1.jpg" class="img-thumbnail" alt="lewis land transfer" width="143" height="84"></p></div>
                    <div class="imageBlockRight"><p><img class="img-zoom" src="_images/pg_p_lewis_smith_lofland_v_heirs_2.jpg" class="img-thumbnail" alt="lewis land transfer" width="142" height="184"></p></div>
                    <div class="captionFull"><figcaption>Smith Lofland's suit against the heirs of Alexander Lewis.</figcaption></div>
            </div>
    </head>
   <script src="jquery.js"></script>  

   <script>

       //THIS IS THE JS FROM THE DEMO

    $(document).ready(function(){
    $('.img-zoom').hover(function() {
        $(this).addClass('transition');

    }, function() {
        $(this).removeClass('transition');
    });
  });

Update

I tried using this solution provided by guest271314 and it works great. But now I have three additional questions:

The font & font-size that I selected is not working except for the last caption, Fig. 10. How can I get that to work for all the captions?
Also, I would like a period after the number in "Fig. #."
Also, how do you get your code and html to appear in their own boxes?

Possible duplicate of [CSS to increase size of first word](http://stackoverflow.com/questions/55612/css-to-increase-size-of-first-word) — tao, Jan 01 '17 at 04:11
1) Editing is a natural part of StackOverflow, and you don't have to call special attention to it. Revision history can be seen by clicking on the _edited_ link under the question/answer. 2) Include your HTML/JS/CSS in a code snippet, so people can more easily check it. 3) Additional questions should be in separate posts, although it's probably a good idea to reference this one. — Zev Spitz, Jan 01 '17 at 08:40
Thank you. I don't know how to create a code snippet. I Googled this and all I found were instructions to indent the code using ctrl k. I see a clickable link "snippet" at the bottom of many posts but I don't know how to create that. Clicking on the "html" and "code" buttons at the top of the message box seems to just bring up information about them, and not a separate box to enter html.css/js into. I'm sorry, I'm very new at this. I did try and find an answer at Meta. — Barton Lewis, Jan 01 '17 at 17:25

guest271314 · Accepted Answer · 2017-01-01T06:49:28.570

You can utilize figure, figcaption elements, css counter, counter-increment set to 1, :before pseudo element with font-variant set to small-caps, font-style set to italic, content set to "Fig" with counter concatenated.

body {
  counter-reset: figcaption;
  counter-increment: 1;
}

figcaption:before {
  counter-increment: figcaption;
  font-variant: small-caps;
  font-style: italic;
  content: "Fig. " counter(figcaption) " ";
}

<figure>
  <img src="http://placehold.it/50x50">
  <figcaption>Short description</figcaption>
</figure>
 
<figure>
  <img src="http://placehold.it/50x50">
  <figcaption>Short description</figcaption>
<figure/>

Using html at Question

body {
  counter-reset: figcaption;
  counter-increment: 1;
}
.imageBlockFloatLeftClearLeft > p:nth-child(2):before {
  counter-increment: figcaption;
  font-variant: small-caps;
  font-style: italic;
  font-size: .8em;
  line-height: 18px;
  content: "Fig. " counter(figcaption) ". ";
}

<div class="imageBlockFloatLeftClearLeft">
  <p>
    <img class="img-zoom" src="_images/pg_p_lewis_alex_17981019_ky_christian_war_1197.jpg" class="img-thumbnail" alt="lewis land warrant" width="140" height="143">
  </p>
  <p>Alexander Lewis's warrant #3663 to survey 200 acres of "second rate land" on the west fork of Pond River, dated 19 Oct 1798.</p>
</div>

<div class="imageBlockFloatLeftClearLeft">
  <p>
    <img class="img-zoom" src="_images/pg_p_lewis_alex_17981019_ky_christian_war_1197.jpg" class="img-thumbnail" alt="lewis land warrant" width="140" height="143">
  </p>
  <p>Alexander Lewis's warrant #3663 to survey 200 acres of "second rate land" on the west fork of Pond River, dated 19 Oct 1798.</p>
</div>

You can also include an a newline following "Fig. 1." text at <p> element, use css white-space set to pre-line, :first-line pseudo element to apply styles to the first line of the selected p element.

.imageBlockFloatLeftClearLeft > p:nth-child(2) {
  white-space: pre-line;
}

.imageBlockFloatLeftClearLeft > p:nth-child(2):first-line {
  font-variant: small-caps;
  font-style: italic;
}

<div class="imageBlockFloatLeftClearLeft">
  <p>
    <img class="img-zoom" src="_images/pg_p_lewis_alex_17981019_ky_christian_war_1197.jpg" class="img-thumbnail" alt="lewis land warrant" width="140" height="143">
  </p>
  <p>Fig. 1.
    Alexander Lewis's warrant #3663 to survey 200 acres of "second rate land" on the west fork of Pond River, dated 19 Oct 1798.</p>
</div>

<div class="imageBlockFloatLeftClearLeft">
  <p>
    <img class="img-zoom" src="_images/pg_p_lewis_alex_17981019_ky_christian_war_1197.jpg" class="img-thumbnail" alt="lewis land warrant" width="140" height="143">
  </p>
  <p>Fig. 2.
    Alexander Lewis's warrant #3663 to survey 200 acres of "second rate land" on the west fork of Pond River, dated 19 Oct 1798.</p>
</div>

A small thing to be aware of: in most (all?) browsers the generated text in `:before` and `:after` can't be selected and copied. Not necessarily a deal-breaker, but I often find this annoying as a user. — Martin Tournoij, Dec 31 '16 at 05:18
@Carpetsmoker Yes, depends on requirement and expected result, see [Code block in a browser for bash commands ignoring path](http://stackoverflow.com/questions/41404470/code-block-in-a-browser-for-bash-commands-ignoring-path/) — guest271314, Dec 31 '16 at 05:28
@Carpetsmoker Included an approach which preserves ability to select `"Fig. N."` with remainder of `p` element text content. — guest271314, Dec 31 '16 at 06:17
A variant of the first approach would be having the content of the pseudo use an attribute of the element. So you cover the posibility of images having random numbers. — vals, Dec 31 '16 at 08:40
Thank you guest271314 I used your code except for the newline addition. It works well but I can't get my text styled the way I want it except for the last figure (no. 10). Please see the revisions to my post and code. I also want a period after "Fig. #". What do I need to do to get my caption styled in the font and font size I need and the period added? Thanks very much. — Barton Lewis, Jan 01 '17 at 06:36
@BartonLewis You can add a `.` character within last `". "` at `content` property, and set `font-size` to `.8em` see updated post. Not certain about the font `"jaf-bernina-sans-narrow"`, how is the font made available at the `document`? Note, `font-size` and `font-family` were not part of original Question or requirement. See http://stackoverflow.com/help/how-to-ask — guest271314, Jan 01 '17 at 06:48
Thank you. I am new at this. I did not realize the solution to my problem would affect the font-family or font-size of the caption so I did not include that in my code. The font-family is being accessed trough Typekit. Should I include that link in my code here? The final caption (no. 10) is showing the correct font and size, but all the preceding ones are in the same font and size as my body text, which is different. — Barton Lewis, Jan 01 '17 at 17:29
@BartonLewis _"Should I include that link in my code here?"_ `font-size` and `font-family` are not part of requirement described at original Question. If approach at Answer resolves original Question, perhaps consider asking another Question specific to `font-size` and `font-family`, which are not relevant to title of Question or original Question. Also,take the time to describe exactly what issue is and expected result, instead of editing Question to include additional requirements that were not described at original Question. Have you read link at previous comment? — guest271314, Jan 01 '17 at 17:33
@BartonLewis _"But now I have three additional questions:"_ Updated Answer at second example should resolve second additional question. — guest271314, Jan 01 '17 at 17:44

mr_nameless · Answer 2 · 2016-12-31T05:54:06.737

0

document.querySelectorAll('.imageBlockFloatLeftClearLeft > p:last-child').forEach(function(caption) {
    var innerHTML = caption.innerHTML; // 'Fig. 4554. Description blah blah 325355 2 4.'
    var matches = innerHTML.match(/(Fig.\s\d+.)(.+)/);
    var fig = matches[1]; //'Fig. 4554.''
    var descr = matches[2]; // ' Description blah blah 325355 2 4.'
    caption.innerHTML = '<em>' + fig + '</em>' + descr;
});

Also, if you want small caps, you should add this to your CSS:

.imageBlockFloatLeftClearLeft > p:last-child em {
    font-variant: small-caps;
}

edited Dec 31 '16 at 05:54

answered Dec 31 '16 at 05:06

mr_nameless

82
4

1

See OP at _"I’d rather do that than have to create a span tag for each and every one."_ – guest271314 Dec 31 '16 at 05:32
1

I think he ment adding `span`s with hands or with PHP. So I just 'told javascript' to do all the job – mr_nameless Dec 31 '16 at 05:46
1

_"or tell Javascript"_ Fair enough. – guest271314 Dec 31 '16 at 05:50
fwiw, added an approach which includes a `
` element following `"Fig. 1."` text at `
` element, though, done by hand at `html`.
– guest271314 Dec 31 '16 at 06:09

How can I make the first few words in a short block of text appear in italics and small caps without using a span tag?

2 Answers2