{"id":2755,"date":"2021-11-08T07:42:19","date_gmt":"2021-11-08T07:42:19","guid":{"rendered":"https:\/\/trial.pixelgrade.com\/tosca\/?page_id=2755"},"modified":"2021-11-26T10:27:27","modified_gmt":"2021-11-26T10:27:27","slug":"drop-caps","status":"publish","type":"page","link":"https:\/\/trial.pixelgrade.com\/tosca\/style-guide\/drop-caps\/","title":{"rendered":"Drop caps"},"content":{"rendered":"
\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\n\t
\n\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t

Fifteen Centuries of Versals<\/h1>

What is snazzier than a good drop cap which has been \u201crubricated\u201d? And yes, rubrication is usually red\u2014hardly ever orange, or green, or purple, or any of the other possible choices.<\/p>\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t<\/div>\n\n\t\n\n\t\t\t\t<\/div>\n\t\t\t<\/div><\/div>\n\t\t<\/div>\n\n\n

There are many ways to indicate the beginning (or resumption) of a section of the text, including paragraph indents, blank lines, changing the weight or style of the opening part of the text, ornamentation like fleurons \u2014 and versals<\/strong><\/em><\/a>, a category that includes drop caps. Versals can be treated in many ways. Indented or centered, they can stick up from the text. Flush left, they can be nested into the text (typographers call these drop caps, as opposed to elevated or stick-up caps). <\/p>\n\n\n\n

If there is room, they can hang in the left margin. They can be set in the same face as the text or in something outlandishly different. In scribal and typographic tradition alike, where the budget permits, versals too are generally red or another color in preference to black.<\/p>\n\n\n\n

What is snazzier than a good drop cap<\/a> which has been \u201crubricated\u201d? And yes, rubrication is usually red<\/em>\u2014hardly ever orange, or green, or purple, or any of the other possible choices.<\/p>\n\n\n\n

A Letterpress History<\/h2>\n\n\n\n

Following Gutenberg\u2019s Bible, the second book to be printed using movable type was the Mainz Psalter<\/em><\/a> in 1456. This typeset work artfully combines two-color printing of movable type and woodcut, with the woodcut versals printed in blue and red and the \u201cnormal\u201d (read, movable-type) text printed in black and red.<\/p>\n\n\n\n

The classical tradition<\/a> was slow to use capital letters for initials at all; in surviving Roman texts it often is difficult even to separate the words as spacing was not used either. In late antiquity (c. 4th\u20136th century) both came into common use in Italy, the initials usually were set in the left margin (as in the third example below), as though to cut them off from the rest of the text, and about twice as tall as the other letters. The radical innovation of insular<\/a> manuscripts was to make initials much larger, not indented, and for the letters immediately following the initial also to be larger, but diminishing in size (called the “diminuendo<\/a>” effect, after the musical term). <\/p>\n\n\n\n

Subsequently, they became larger still, coloured, and penetrated farther and farther into the rest of the text, until the whole page might be taken over. The decoration of insular initials, especially large ones, was generally abstract and geometrical, or featured animals in patterns. Historiated initials were an Insular<\/a> invention, but did not come into their own until the later developments of Ottonian art, Anglo-Saxon art, and the Romanesque<\/a> style in particular. After this period, in Gothic art large paintings of scenes tended to go in rectangular framed spaces, and the initial, although often still historiated, tended to become smaller again.<\/p>\n\n\n\n

Types of initial<\/h2>\n\n\n\n

The initials are morphologically classified: the rubricated letter (red); the epigraphic letter, imitating ancient Roman majuscules; the figurated initial (usually in miniatures); the historiated initial, that gives spatial support to scenes of a narrative character.<\/p>\n\n\n\n

With a drop cap<\/strong>, the initial sits within the margins and runs several lines deep into the paragraph, indenting some normal-sized text in these lines. This keeps the left and top margins of the paragraph flush.<\/p>\n\n\n\n

In modern computer browsers, this may be achieved with a combination of HTML and CSS by using the float: left;<\/strong> setting. A CSS-only solution alternatively can use the :first-letter<\/strong> pseudo-element. An example of this format is the following paragraph:<\/p>\n\n\n\n

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<\/p>\n\n\n\n

Reprehenderit ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<\/p>\n\n\n\n

Geprehenderit ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<\/p>\n\n\n\n

Keprehenderit ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<\/p>\n\n\n\n

Qeprehenderit ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<\/p>\n\n\n\n

Aeprehenderit ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<\/p>\n\n\n\n

Ieprehenderit ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<\/p>\n\n\n\n

Eeprehenderit ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<\/p>\n\n\n\n

Seprehenderit ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<\/p>\n\n\n\n

1Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<\/p>\n\n\n\n

\u6c49orem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<\/p>\n\n\n\n

\u3042\u3044\u3058\u3087\u3046orem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<\/p>\n\n\n\n

\u0643orem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<\/p>\n","protected":false},"excerpt":{"rendered":"

There are many ways to indicate the beginning (or resumption) of a section of the text, including paragraph indents, blank lines, changing the weight or […]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":1718,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"novablocks_hero_scroll_indicator":false,"novablocks_hero_position_indicators":false,"supernova_prevent_duplicate":false,"inline_featured_image":false},"_links":{"self":[{"href":"https:\/\/trial.pixelgrade.com\/tosca\/wp-json\/wp\/v2\/pages\/2755"}],"collection":[{"href":"https:\/\/trial.pixelgrade.com\/tosca\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/trial.pixelgrade.com\/tosca\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/trial.pixelgrade.com\/tosca\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/trial.pixelgrade.com\/tosca\/wp-json\/wp\/v2\/comments?post=2755"}],"version-history":[{"count":11,"href":"https:\/\/trial.pixelgrade.com\/tosca\/wp-json\/wp\/v2\/pages\/2755\/revisions"}],"predecessor-version":[{"id":2792,"href":"https:\/\/trial.pixelgrade.com\/tosca\/wp-json\/wp\/v2\/pages\/2755\/revisions\/2792"}],"up":[{"embeddable":true,"href":"https:\/\/trial.pixelgrade.com\/tosca\/wp-json\/wp\/v2\/pages\/1718"}],"wp:attachment":[{"href":"https:\/\/trial.pixelgrade.com\/tosca\/wp-json\/wp\/v2\/media?parent=2755"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}