dropcaps.js issue when first word is 2 letters

Question

I am using dropcaps.js to split the first letter of a sentence from the rest, and make it larger/dropcap. The code below is working perfectly, apart from when the first word of the sentence is just two letters. In this instance, the second letter (so not the dropcap letter) sits immediately next to the second word, regardless of wether or not a space (no matter how many) exist. Is there something is the below code that might be causing this?

// Jquery
// Isolate the first letter of relevent paragraphs and place within <span>
    $('p.has-drop-cap').each(function() {
        var text = $.trim($(this).html());
        var firstLetter = text.substr(0,1);
        $(this).html('<span class="initial-letter">' + firstLetter + '</span>' + '<span class="remaining-text">' + text.slice(1) + '</span>');
    }); 

    // Init dropcap.js and target <span>
    var dropcaps = document.querySelectorAll(".initial-letter");
    // Set dropcap number of rows to fit and baseline position
    window.Dropcap.layout(dropcaps, 5, 5);

// CSS  
// For first letter
.initial-letter {
    float: left;
    padding: 0px;
    font-size: 182px;
    line-height: 0px;
    margin-top: 6.3px;
    height: 127.4px;
}
// For second letter
p.has-drop-cap:first-letter {
    font-size: inherit !important;
    line-height: inherit !important;
    margin: 0 !important;
    text-transform: lowercase !important;
}

`substr` is legacy. Use `text[0]` to get the first letter of `text`. Please post your CSS for the relevant classes as well, as it seems your JS code is working correctly. — Bucket, Jan 16 '19 at 15:05
Assuming you're using the Adobe dropcap js library I don't see an issue. Example fiddle: http://jsfiddle.net/Ld2v8amp/ — Nathan Champion, Jan 16 '19 at 15:18
@Bucket - thank you, I think you are right that the JS is working correctly. I have added the .initial-letter css above, I think it might be related to the float:left value? Although I'm unsure why this would work fine with longer words? — dungey_140, Jan 16 '19 at 15:25
@dungey_140 in addition to the `.initial-letter` CSS, plase include the CSS for `.remaining-text` and `p.has-drop-cap`. http://jsfiddle.net/wp6duabs/ — Bucket, Jan 16 '19 at 15:51
Thanks @Bucket - have amended as requested, but there are no styles for .remaining-text — dungey_140, Jan 16 '19 at 16:00
Any further thoughts @bucket? Would appreciate your help on this one! — dungey_140, Jan 17 '19 at 13:17
@dungey_140 while my CSS knowledge isn't completely robust, I would assume that if you're not giving your `.remaining-text` the `float: left` style, you may run into unexpected troubles. Your idea to assign `display:flex` to the container `
` element seems solid, especially since it accommodates for the issues pertaining to RTL vs. LTR texts. You may want to experiment with now removing the `float` style, since `left` is meaningless in flex containers - they instead use `start` and `end`: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox — Bucket, Jan 17 '19 at 15:14

score 0 · Answer 1 · answered Jan 17 '19 at 13:47

The issue has been isolated to .initial-letter using float: left to position itself correctly. This, for reasons I'm not 100% sure of, meant that if the first word within .remaining-text was <2 characters, then no space would be applied between those 2 letters and the following word.

I have discovered that applying display: flex to the parent p.has-drop-cap, resolves this issue, even without removing float: left on .initial-letter.

dropcaps.js issue when first word is 2 letters

1 Answers1