Creative CSS Techniques: Styling Initial Capital Letters (Drop Caps) in a CSS3 Multicolumn Layout

Question

Creative CSS Techniques: Styling Initial Capital Letters (Drop Caps) in a CSS3 Multicolumn Layout

For the past year, the multicolumn css3 property has grown in popularity among different browsers. It's a good reason to consider implementing it on your website for improved design and readability. I decided to take it a step further and incorporate the elegant Drop Caps (=first large initial letter) into the multicolumn layout. However, some screen widths cause the multicolumn layout to break in FireFox. What could be causing this issue?

see jsfiddle DEMO

When adjusting the window width, you'll notice the layout issues persist in both IE and Firefox. Below is an example of the problem. I'm stuck trying to figure out what's causing these misalignments in the multicolumn setup!

Apologies for my unkempt appearance in the photo: I forgot to shave, as I've been engrossed in solving this problem all day without a chance to tidy up. I can assure you that once this issue is resolved, a clean-shaven portrait will replace this untrimmed one!

There are more alignment challenges across various screen widths in Internet Explorer 11. Interestingly, Safari and Chrome display the layout flawlessly across all browser screen sizes without any breaks.

#multicolumn {
         column-count: 3;
    -moz-column-count: 3;
 -webkit-column-count: 3;
         column-gap: 53px;
    -moz-column-gap: 53px;
 -webkit-column-gap: 53px;
         column-rule-color: #EEE;
    -moz-column-rule-color: #EEE;
 -webkit-column-rule-color: #EEE;
         column-rule-style: solid;
    -moz-column-rule-style: solid;
 -webkit-column-rule-style: solid;
     column-rule-width: 1px;
    -moz-column-rule-width: 1px;
 -webkit-column-rule-width: 1px;
}

#multicolumn p:first-letter{
    float:left;
    font-weight:normal;
    font-size:44px;
    margin: 7px 1px 0px 0px;
    line-height:27px;
    background-color:#AEE;
}

css layout multiple-columns

Answer 1

Answer №1

At the outset, I must emphasize that utilizing the multi-column layout module is still not advisable.

This is mainly due to the lack of support for properties like break-before, break-after, and break-inside, except for IE 10+ and the proprietary -webkit-column-break-* properties (refer: CSS3 Multiple column layout).
(For more insights, you may want to check out my response on this SO inquiry: IE (11) improper handling of CSS multi-columns?)

Moreover, it's essential to bear in mind the existence of a "multi-column pseudo-algorithm", which might be befuddled by your :first-letter selector.

To circumvent this issue, consider using a span element with a designated class attribute for drop caps instead.

However, since the initial letters are larger than the subsequent text, another challenge arises.
There could be instances where a line at the start of a paragraph with a drop cap aligns with the previous column, while the drop cap (being twice as tall as regular text) does not.

To prevent this undesirable scenario, include additional text within the span element to exceed a single line's length!
Applying display: inline-block; to these span elements resolves this issue.

A quick note regarding Amir5000's response: While my suggested solution also necessitates extra span elements, it does not rely on "purely presentational markup", which can lead to superfluous blank lines.

Nevertheless, as initially mentioned, working with multi-columns is quite complex and challenging to achieve consistent outcomes across various browsers or viewport sizes.

Therefore, I present my proposed "solution": DEMO

Answer 2