{"id":3332,"date":"2017-01-10T14:03:39","date_gmt":"2017-01-10T13:03:39","guid":{"rendered":"https:\/\/en.florianbrinkmann.de\/?p=3332"},"modified":"2020-02-09T10:59:58","modified_gmt":"2020-02-09T09:59:58","slug":"creating-responsive-drop-caps","status":"publish","type":"post","link":"https:\/\/florianbrinkmann.com\/en\/creating-responsive-drop-caps-3332\/","title":{"rendered":"Creating responsive drop caps"},"content":{"rendered":"<figure class=\"wp-block-image\"><noscript><img decoding=\"async\" width=\"1200\" height=\"675\" src=\"https:\/\/florianbrinkmann.com\/en\/wp-content\/uploads\/sites\/11\/2017\/01\/initiale-drop-caps-featured-image.jpg\" alt class=\"wp-image-3338\" srcset=\"https:\/\/florianbrinkmann.com\/en\/wp-content\/uploads\/sites\/11\/2017\/01\/initiale-drop-caps-featured-image.jpg 1200w, https:\/\/florianbrinkmann.com\/en\/wp-content\/uploads\/sites\/11\/2017\/01\/initiale-drop-caps-featured-image-356x200.jpg 356w, https:\/\/florianbrinkmann.com\/en\/wp-content\/uploads\/sites\/11\/2017\/01\/initiale-drop-caps-featured-image-300x169.jpg 300w, https:\/\/florianbrinkmann.com\/en\/wp-content\/uploads\/sites\/11\/2017\/01\/initiale-drop-caps-featured-image-768x432.jpg 768w, https:\/\/florianbrinkmann.com\/en\/wp-content\/uploads\/sites\/11\/2017\/01\/initiale-drop-caps-featured-image-806x453.jpg 806w, https:\/\/florianbrinkmann.com\/en\/wp-content\/uploads\/sites\/11\/2017\/01\/initiale-drop-caps-featured-image-600x338.jpg 600w\" sizes=\"(max-width: 1200px) 100vw, 1200px\"><\/noscript><img decoding=\"async\" width=\"1200\" height=\"675\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201200%20675%22%3E%3C%2Fsvg%3E\" alt class=\"wp-image-3338 lazyload\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201200%20675%22%3E%3C%2Fsvg%3E 1200w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" data-srcset=\"https:\/\/florianbrinkmann.com\/en\/wp-content\/uploads\/sites\/11\/2017\/01\/initiale-drop-caps-featured-image.jpg 1200w, https:\/\/florianbrinkmann.com\/en\/wp-content\/uploads\/sites\/11\/2017\/01\/initiale-drop-caps-featured-image-356x200.jpg 356w, https:\/\/florianbrinkmann.com\/en\/wp-content\/uploads\/sites\/11\/2017\/01\/initiale-drop-caps-featured-image-300x169.jpg 300w, https:\/\/florianbrinkmann.com\/en\/wp-content\/uploads\/sites\/11\/2017\/01\/initiale-drop-caps-featured-image-768x432.jpg 768w, https:\/\/florianbrinkmann.com\/en\/wp-content\/uploads\/sites\/11\/2017\/01\/initiale-drop-caps-featured-image-806x453.jpg 806w, https:\/\/florianbrinkmann.com\/en\/wp-content\/uploads\/sites\/11\/2017\/01\/initiale-drop-caps-featured-image-600x338.jpg 600w\" data-src=\"https:\/\/florianbrinkmann.com\/en\/wp-content\/uploads\/sites\/11\/2017\/01\/initiale-drop-caps-featured-image.jpg\"><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Drop caps (larger first letters of paragraphs which go about multiple lines) are a relatively rare used element in web design, but they can look really great. In this post, I show you how to implement them.<\/p>\n\n\n\n<!--more-->\n\n\n\n<p class=\"wp-block-paragraph\">In a project, I had to create drop caps and wrote a quick solution in CSS. This worked for some browsers, for some it did not. Looking for an easy solution, I stumbled upon <a href=\"https:\/\/github.com\/adobe-webplatform\/dropcap.js\">Adobe\u2019s dropcap.js<\/a>. The script uses pixel values, which is not really cool in responsive design. If a user resizes its viewport while visiting a web page, the font size will probably change. But the drop cap will not.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">To resolve this, I first tried the following: I copied the script\u2019s generated values into my stylesheet and converted them to relative units. Works well, but recently I came across an issue with this solution. What happens, if the user uses another font or the font for which the values were generated cannot be loaded? The answer is easy: the values will not be correct anymore.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">With this in mind, it had to be a JavaScript solution. For that, I modified Adobe\u2019s script a bit, so it produces relative values. <a href=\"https:\/\/gist.github.com\/FlorianBrinkmann\/10b56b7c44ac8339dfae32b19e505875\">You can find the result in my Gist<\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">To use the script, you only have to wrap the first letter from one or more paragraphs inside an element with the class dropcap. The following code shows how to run the script:<\/p>\n\n\n<pre class=\"wp-block-code lang-javascript\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">'.\/dropcap.js'<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>&gt;<\/span><span class=\"javascript\">\n   <span class=\"hljs-keyword\">var<\/span> dropcaps = <span class=\"hljs-built_in\">document<\/span>.querySelectorAll(<span class=\"hljs-string\">\".dropcap\"<\/span>);\n   <span class=\"hljs-built_in\">window<\/span>.Dropcap.layout(dropcaps, <span class=\"hljs-number\">3<\/span>);\n<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p class=\"wp-block-paragraph\">The second parameter of <code class=\"lang-javascript\">window.Dropcap.layout()<\/code> specifies the drop cap\u2019s height (number of lines). An optional third parameter specifies the line on which the drop cap stands. The default value for that is the same as the second parameter.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The font size for the paragraphs with drop caps has to be specified through the <code class=\"lang-css\">html<\/code> selector. Otherwise, the script will not work probably.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Drop caps (larger first letters of paragraphs which go about multiple lines) are a relatively rare used element in web design, but they can look really great. In this post, I show you how to implement them.<\/p>\n","protected":false},"author":1,"featured_media":3338,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"wpf_show_in_dewp_planet_feed":false,"flobn_post_versions":"","webmentions_disabled_pings":false,"webmentions_disabled":false,"lazy_load_responsive_images_disabled":false,"footnotes":""},"categories":[6],"tags":[],"class_list":["post-3332","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-development"],"wp-worthy-pixel":{"ignored":false,"public":"7ed31ec01add4d90ae55933ec2fd727a","server":"vg01.met.vgwort.de","url":"https:\/\/vg01.met.vgwort.de\/na\/7ed31ec01add4d90ae55933ec2fd727a"},"wp-worthy-type":"normal","_links":{"self":[{"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/posts\/3332","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/comments?post=3332"}],"version-history":[{"count":8,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/posts\/3332\/revisions"}],"predecessor-version":[{"id":5925,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/posts\/3332\/revisions\/5925"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/media\/3338"}],"wp:attachment":[{"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/media?parent=3332"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/categories?post=3332"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/tags?post=3332"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}