{"id":4906,"date":"2023-12-09T18:00:40","date_gmt":"2023-12-09T18:00:40","guid":{"rendered":"https:\/\/williamcromar.com\/newmediawiki\/?p=4906"},"modified":"2024-01-11T11:42:36","modified_gmt":"2024-01-11T11:42:36","slug":"marinetticss","status":"publish","type":"post","link":"https:\/\/williamcromar.com\/newmediawiki\/marinetticss\/","title":{"rendered":"marinettiCSS"},"content":{"rendered":"\n<div class=\"wp-block-columns has-white-background-color has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:25%\"><\/div>\n\n\n\n<div class=\"wp-block-column has-white-background-color has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:75%\">\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column has-white-background-color has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\"><div class=\"wp-block-image is-style-rounded\">\n<figure class=\"aligncenter size-full is-resized\"><a href=\"https:\/\/williamcromar.com\/newmediawiki\/nmw\/4d-media\/\"><img loading=\"lazy\" decoding=\"async\" width=\"420\" height=\"420\" data-attachment-id=\"17\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/nmw\/manraytrans\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/manraytrans.gif\" data-orig-size=\"420,420\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"manraytrans\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/manraytrans.gif\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/manraytrans.gif\" alt=\"\" class=\"wp-image-17\" style=\"aspect-ratio:1;object-fit:cover;width:120px;height:undefinedpx\"\/><\/a><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center has-small-font-size\"><strong><a href=\"https:\/\/williamcromar.com\/newmediawiki\/nmw\/4d-media\/\">4D media<\/a><\/strong><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column has-white-background-color has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\"><div class=\"wp-block-image is-style-rounded\">\n<figure class=\"aligncenter size-full is-resized\"><a href=\"https:\/\/williamcromar.com\/newmediawiki\/concretepoetry\/\"><img loading=\"lazy\" decoding=\"async\" width=\"617\" height=\"640\" data-attachment-id=\"146\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/nmw\/4d-media\/concretepoetry\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/concretePoetry.jpg\" data-orig-size=\"617,640\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"concretePoetry\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/concretePoetry.jpg\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/concretePoetry.jpg\" alt=\"\" class=\"wp-image-146\" style=\"aspect-ratio:1;object-fit:cover;width:120px;height:undefinedpx\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/concretePoetry.jpg 617w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/concretePoetry-289x300.jpg 289w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/concretePoetry-300x311.jpg 300w\" sizes=\"auto, (max-width: 617px) 100vw, 617px\" \/><\/a><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center has-small-font-size\"><strong><a href=\"https:\/\/williamcromar.com\/newmediawiki\/concretepoetry\/\">3 | concrete poetry<\/a><\/strong><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column has-white-background-color has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\"><div class=\"wp-block-image is-style-default\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"660\" height=\"660\" data-attachment-id=\"5106\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/marinetti_icon\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/marinetti_icon.png\" data-orig-size=\"660,660\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"marinetti_icon\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/marinetti_icon.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/marinetti_icon.png\" alt=\"\" class=\"wp-image-5106\" style=\"aspect-ratio:1;object-fit:cover;width:120px;height:undefinedpx\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/marinetti_icon.png 660w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/marinetti_icon-300x300.png 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/marinetti_icon-150x150.png 150w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/marinetti_icon-100x100.png 100w\" sizes=\"auto, (max-width: 660px) 100vw, 660px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center has-small-font-size\"><strong>marinettiCSS<\/strong><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\"><div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title\" style=\"cursor:inherit\">Contents<\/div>\n<label for=\"ez-toc-cssicon-toggle-item-69f51ad48606e\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"ez-toc-cssicon\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-69f51ad48606e\"  aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/williamcromar.com\/newmediawiki\/marinetticss\/#An_act_of_artistic_%E2%80%9Cforgery%E2%80%9D\" >An act of artistic &#8220;forgery&#8221;<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/williamcromar.com\/newmediawiki\/marinetticss\/#Marinetti_in_Typeset\" >Marinetti in Typeset<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/williamcromar.com\/newmediawiki\/marinetticss\/#Marinetti_in_CSS\" >Marinetti in CSS<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/williamcromar.com\/newmediawiki\/marinetticss\/#Transforms_in_CSS\" >Transforms in CSS<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/williamcromar.com\/newmediawiki\/marinetticss\/#Setting_Marinetti\" >Setting Marinetti<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/williamcromar.com\/newmediawiki\/marinetticss\/#Step_0_Analyze_and_prepare_the_poem_image\" >Step 0: Analyze and prepare the poem image<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/williamcromar.com\/newmediawiki\/marinetticss\/#Finding_main_sections\" >Finding main sections<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/williamcromar.com\/newmediawiki\/marinetticss\/#Sizing_the_image\" >Sizing the image<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/williamcromar.com\/newmediawiki\/marinetticss\/#Step_1_Creating_the_basic_HTML_structure\" >Step 1: Creating the basic HTML structure<\/a><ul class='ez-toc-list-level-6' ><li class='ez-toc-heading-level-6'><ul class='ez-toc-list-level-6' ><li class='ez-toc-heading-level-6'><ul class='ez-toc-list-level-6' ><li class='ez-toc-heading-level-6'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/williamcromar.com\/newmediawiki\/marinetticss\/#Embed\" >Embed<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-6'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/williamcromar.com\/newmediawiki\/marinetticss\/#HTML\" >HTML<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-6'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/williamcromar.com\/newmediawiki\/marinetticss\/#CSS\" >CSS<\/a><\/li><\/ul><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/williamcromar.com\/newmediawiki\/marinetticss\/#Attaching_CSS\" >Attaching CSS<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/williamcromar.com\/newmediawiki\/marinetticss\/#Tracing_a_background_image\" >Tracing a background image<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/williamcromar.com\/newmediawiki\/marinetticss\/#Step_2_Create_position_and_size_primary_divs_with_ruled_borders\" >Step 2: Create, position, and size primary divs with ruled borders<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/williamcromar.com\/newmediawiki\/marinetticss\/#IDs_versus_classes\" >IDs versus classes<\/a><ul class='ez-toc-list-level-5' ><li class='ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-17\" href=\"https:\/\/williamcromar.com\/newmediawiki\/marinetticss\/#Sizing_and_placing_divs_with_IDs\" >Sizing and placing divs with IDs<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-18\" href=\"https:\/\/williamcromar.com\/newmediawiki\/marinetticss\/#Styling_ruled_borders_with_classes\" >Styling ruled borders with classes<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-19\" href=\"https:\/\/williamcromar.com\/newmediawiki\/marinetticss\/#Temporary_background_colors\" >Temporary background colors<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-20\" href=\"https:\/\/williamcromar.com\/newmediawiki\/marinetticss\/#Step_3_Adding_unformatted_content_with_secondary_divs\" >Step 3: Adding unformatted content with secondary divs<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-21\" href=\"https:\/\/williamcromar.com\/newmediawiki\/marinetticss\/#Step_4_Justifying_content\" >Step 4: Justifying content<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-22\" href=\"https:\/\/williamcromar.com\/newmediawiki\/marinetticss\/#Step_5_Adding_and_sizing_typefaces\" >Step 5: Adding and sizing typefaces<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-23\" href=\"https:\/\/williamcromar.com\/newmediawiki\/marinetticss\/#Searching_for_fonts\" >Searching for fonts<\/a><ul class='ez-toc-list-level-5' ><li class='ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-24\" href=\"https:\/\/williamcromar.com\/newmediawiki\/marinetticss\/#Google_Fonts\" >Google Fonts<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-25\" href=\"https:\/\/williamcromar.com\/newmediawiki\/marinetticss\/#Searching_with_IdentiFont\" >Searching with IdentiFont<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-26\" href=\"https:\/\/williamcromar.com\/newmediawiki\/marinetticss\/#CSS_%E2%80%9Ctypesetting%E2%80%9D_properties\" >CSS &#8220;typesetting&#8221; properties<\/a><ul class='ez-toc-list-level-5' ><li class='ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-27\" href=\"https:\/\/williamcromar.com\/newmediawiki\/marinetticss\/#Choose_the_height_first\" >Choose the height first!<\/a><\/li><\/ul><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-28\" href=\"https:\/\/williamcromar.com\/newmediawiki\/marinetticss\/#Step_6_Styling_transform_scale_and_rotate\" >Step 6: Styling transform scale and rotate<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-29\" href=\"https:\/\/williamcromar.com\/newmediawiki\/marinetticss\/#Non-uniform_scaling_a_forgivable_type-crime\" >Non-uniform scaling: a forgivable type-crime?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-30\" href=\"https:\/\/williamcromar.com\/newmediawiki\/marinetticss\/#Rotating_type\" >Rotating type<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-31\" href=\"https:\/\/williamcromar.com\/newmediawiki\/marinetticss\/#Step_7_Spans_inline_styles_and_colors\" >Step 7: Spans, inline styles, and colors<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-32\" href=\"https:\/\/williamcromar.com\/newmediawiki\/marinetticss\/#When_is_it_OK_to_use_inline_styles\" >When is it OK to use inline styles?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-33\" href=\"https:\/\/williamcromar.com\/newmediawiki\/marinetticss\/#Color_the_finishing_touch\" >Color: the finishing touch<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-34\" href=\"https:\/\/williamcromar.com\/newmediawiki\/marinetticss\/#Final_step_licensing_and_publishing\" >Final step: licensing and publishing<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-top has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"background-color:#eeeeee;flex-basis:100%\">\n<p class=\"has-text-align-center\"><em><strong><a href=\"https:\/\/williamcromar.com\/code_samples\/marinetti-animate23\/marinetti.html\" target=\"_blank\" rel=\"noreferrer noopener\">Visit the finished Marinetti site &gt;<\/a><\/strong><\/em><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"An_act_of_artistic_%E2%80%9Cforgery%E2%80%9D\"><\/span>An act of artistic &#8220;forgery&#8221;<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<blockquote class=\"wp-block-quote has-text-align-left is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"has-text-align-left\"><em>Art is a lie that makes us realize the truth.<\/em><\/p>\n<cite><em>\u2014Pablo Picasso<\/em><\/cite><\/blockquote>\n\n\n\n<blockquote class=\"wp-block-quote has-text-align-left is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"has-text-align-left\"><em>One of the surest tests is the way in which a poet borrows. Immature poets imitate; mature poets steal; bad poets deface what they take, and good poets make it into something better, or at least something different. The good poet welds his theft into a whole of feeling which is unique, utterly different than that from which it is torn; the bad poet throws it into something which has no cohesion. A good poet will usually borrow from authors remote in time, or alien in language, or diverse in interest.<\/em><\/p>\n<cite><em>\u2014T. S. Eliot<\/em><\/cite><\/blockquote>\n\n\n\n<p>Deceit or double take? Larceny or license? The art world is rife with what at first glance appears to be little more than thievery, plagiarism, lies, and stunts. What separates an artist appropriating an image from a student caught in the act of plagiarism? In a word: intent. The plagiarizing student wishes to pass others&#8217; work off as their own. The appropriating artist wishes to reveal a new way of seeing things that have become so familiar that we have come to take them for granted.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<p>Several people have employed acts of forgery as an artistic expression. Notable within this genre are the museum hoaxes of Banksy, discussed in this&nbsp;<a href=\"http:\/\/www.nytimes.com\/2005\/03\/24\/arts\/design\/need-talent-to-exhibit-in-museums-not-this-prankster.html?_r=0\" target=\"_blank\" rel=\"noreferrer noopener\">NY Times article<\/a>, and with images in this&nbsp;<a href=\"https:\/\/web.archive.org\/web\/20071204180439\/http:\/\/www.nytimes.com\/slideshow\/2005\/03\/23\/arts\/20050324_ARTI_SLIDESHOW_1.html\" target=\"_blank\" rel=\"noreferrer noopener\">NYT slideshow<\/a>&nbsp;which borrows from an original post in a now-broken blog post at&nbsp;<a href=\"http:\/\/www.woostercollective.com\/2005\/03\/a_wooster_exclusive_banksy_hit.html\" target=\"_blank\" rel=\"noreferrer noopener\">Wooster Collective<\/a>. Notice how his work follows the conventions of museum painting and framing, which is why some of his museum hoaxes lasted for days without being noticed even by museum workers! So: what is authentically art?<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"683\" data-attachment-id=\"4914\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/marinetticss\/25fyi1-superjumbo-v2\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/25FYI1-superJumbo-v2.webp\" data-orig-size=\"2048,1365\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"25FYI1-superJumbo-v2\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/25FYI1-superJumbo-v2-1024x683.webp\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/25FYI1-superJumbo-v2-1024x683.webp\" alt=\"\" class=\"wp-image-4914\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/25FYI1-superJumbo-v2-1024x683.webp 1024w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/25FYI1-superJumbo-v2-300x200.webp 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/25FYI1-superJumbo-v2-768x512.webp 768w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/25FYI1-superJumbo-v2-1536x1024.webp 1536w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/25FYI1-superJumbo-v2.webp 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\"><em>Bansky &#8220;installation&#8221; at the Met, 2005<\/em><\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"500\" height=\"214\" data-attachment-id=\"4915\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/marinetticss\/boggs\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/boggs.jpg\" data-orig-size=\"500,214\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"boggs\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/boggs.jpg\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/boggs.jpg\" alt=\"\" class=\"wp-image-4915\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/boggs.jpg 500w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/boggs-300x128.jpg 300w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\"><em>J. S. G. Boggs, $1 FUNback, 1998<\/em><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p>The artist&nbsp;<a href=\"http:\/\/www.artscenecal.com\/ArticlesFile\/Archive\/Articles1999\/Articles0999\/JBoggsA.html\">J. S. G. Boggs<\/a> forged a pretty common one: money. He doesn&#8217;t sell his work \u2014 he spends it, informing the recipient of his <strong>Boggs bill<\/strong> of its nature before consummating a transaction. He therefore is not a counterfeiter, as his bills do not replicate so much as resemble money, and he doesn&#8217;t try to pass it off as real. And the lucky recipient of Boggs&#8217; money resells it on the art market for vastly more than the face value. So: what is authentically money?&nbsp;<\/p>\n<\/div>\n<\/div>\n\n\n\n<p>This exercise is informed by such a strategy. Using a famous work of typographic innovation below, we&#8217;ll attempt a CSS &#8220;forgery&#8221; of the same. Is it possible for code to replicate typesetting?<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Marinetti_in_Typeset\"><\/span>Marinetti in Typeset<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Filippo Tommaso Marinetti was equal parts politician and artist. He was one of the founders of Italian Futurism, an artistic movement that celebrated the dynamism of the machine age. Alas, the Futurists allied themselves with Italian Fascism. Sharing a vision of a new Italy, Marinetti and dictator Benito Mussolini became collaborators. Marinetti hoped Futurism would become the official art of the Fascist state \u2014 a status Mussolini was not interested in bestowing. Nevertheless, unlike the Nazi regime, Fascism did not reject modernist movements like Futurism.<\/p>\n\n\n\n<p>While there is no excuse for Marinetti&#8217;s opportunistic alliance with a morally bankrupt and nihilistic political party, from a strictly formal standpoint art historians recognize his typography as an innovation that changed the course of fine art and graphic design around the world, far beyond the ideological confines of Fascism.<\/p>\n\n\n\n<div class=\"wp-block-columns has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\" style=\"background-color:#eeeeee\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<p>Take a look at this &#8220;stanza&#8221; from the poem <em>Dunes<\/em> by Marinetti. He revered machines and motion, and the physical act of typesetting and the dynamic action of the printing press inspired the formatting of his poetry. Variously in French and Italian, Marinetti called his typographic experiments <em><a href=\"https:\/\/web.archive.org\/web\/20150618165407\/http:\/\/www.my-os.net\/blog\/index.php?2006\/11\/15\/570-le-manifeste-du-futurisme\" target=\"_blank\" rel=\"noreferrer noopener\">les mots en libert\u00e9<\/a><\/em> or <em>parole in libert\u00e1<\/em> (words-in-freedom). Despite his nationalist politics, he worked for a French newspaper as a war correspondent and wrote a version of this poem in <a href=\"https:\/\/www.poemhunter.com\/i\/ebooks\/pdf\/filippo_tommaso_marinetti_2012_3.pdf\" target=\"_blank\" rel=\"noreferrer noopener\">French<\/a>:<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"500\" height=\"610\" data-attachment-id=\"4916\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/marinetticss\/marinetti_from-dunes_1914\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/Marinetti_from-Dunes_1914.jpg\" data-orig-size=\"500,610\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;1&quot;}\" data-image-title=\"Marinetti_from-Dunes_1914\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/Marinetti_from-Dunes_1914.jpg\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/Marinetti_from-Dunes_1914.jpg\" alt=\"\" class=\"wp-image-4916\" style=\"object-fit:cover\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/Marinetti_from-Dunes_1914.jpg 500w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/Marinetti_from-Dunes_1914-246x300.jpg 246w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/Marinetti_from-Dunes_1914-300x366.jpg 300w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/figure>\n<\/div><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p>The Italian version of <em>Dune<\/em> was published on 15 February 1914 in <em>Lacerba<\/em>, an Italian literary journal. The poem begins on the third page. We find the Italian version of the &#8220;stanza&#8221; at the top of page 5:<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<iframe loading=\"lazy\"\n    src=\"https:\/\/archive.org\/embed\/lacerba-a.-ii-n.-4-15-febbraio-1914\" width=\"100%\"\n    height=\"580\" frameborder=\"0\" webkitallowfullscreen=\"true\"\n    mozallowfullscreen=\"true\" allowfullscreen><\/iframe>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p>And if we wonder how such a poem might sound, Marinetti demonstrates the auditory impact of his words-in-freedom aesthetic in a recording that is equal parts reading aloud and performance art.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-audio aligncenter\"><audio controls src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/Marinetti.mp3\"><\/audio><\/figure>\n\n\n\n<p class=\"has-text-align-center\"><em><a href=\"https:\/\/www.moma.org\/interactives\/exhibitions\/2009\/futurism\/\" target=\"_blank\" rel=\"noreferrer noopener\">From Words in Freedom: Futurism at 100, MoMA<\/a><\/em><\/p>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Marinetti_in_CSS\"><\/span>Marinetti in CSS<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<div class=\"wp-block-columns has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\" style=\"background-color:#eeeeee\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<p>We took the French version of the Marinetti poem above and, using CSS, set the text of the poem in a manner that reflects the content. <\/p>\n\n\n\n<p>After &#8220;typesetting&#8221; it in CSS, we styled colors of faded ink and aged paper that drew inspiration from the <em>Lacerba<\/em> publication.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"500\" height=\"610\" data-attachment-id=\"4944\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/marinetticss\/marinetti_french\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/marinetti_french.png\" data-orig-size=\"500,610\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"marinetti_french\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/marinetti_french.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/marinetti_french.png\" alt=\"\" class=\"wp-image-4944\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/marinetti_french.png 500w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/marinetti_french-246x300.png 246w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/marinetti_french-300x366.png 300w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Transforms_in_CSS\"><\/span>Transforms in CSS<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>A particularly fun&nbsp;<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/transform\" target=\"_blank\" rel=\"noreferrer noopener\">MDN Web Docs&nbsp;section<\/a> covers a special case of code known as a&nbsp;<strong>transform<\/strong>. Transforms can scale, rotate, skew, or translate elements, and are supported in modern browsers. Transforms are even animatable!<\/p>\n\n\n\n<p>The sandbox at the link above allows you to play with transforms and copy the code. Another sandbox is found at <a href=\"https:\/\/www.w3schools.com\/css\/css3_2dtransforms.asp\" target=\"_blank\" rel=\"noreferrer noopener\">w3schools.com<\/a>, and another that allows you to animate is at <a href=\"https:\/\/westciv.com\/tools\/transforms\/index.html\" target=\"_blank\" rel=\"noreferrer noopener\">westciv.com<\/a>.<\/p>\n\n\n\n<p>In our CSS setting of the Marinetti poem, we&#8217;ll be focusing on <em>transform: scale<\/em> and <em>transform: rotate<\/em> to help us achieve our &#8220;forgery.&#8221;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Setting_Marinetti\"><\/span>Setting Marinetti<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Your task will be to use line spacing, word spacing, font family, font-size, margin, transform rotation and scaling, color, and other attributes to make your CSS version look like the original, to generate a CSS setting of the text as similar to the typesetting as you can create. In short, you are attempting to create a forgery.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step_0_Analyze_and_prepare_the_poem_image\"><\/span>Step 0: Analyze and prepare the poem image<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Finding_main_sections\"><\/span>Finding main sections<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<p>In a sketch, we broke down the visual elements and hierarchy, finding attributes and formats common and\/or unique to each element. We thought about visualizing different &#8220;zones&#8221; of content that might translate into divs or spans, as in this sketch:<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"500\" height=\"610\" data-attachment-id=\"4952\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/marinetticss\/marinetti_sketch\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/marinetti_sketch.jpg\" data-orig-size=\"500,610\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;1&quot;}\" data-image-title=\"marinetti_sketch\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/marinetti_sketch.jpg\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/marinetti_sketch.jpg\" alt=\"\" class=\"wp-image-4952\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/marinetti_sketch.jpg 500w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/marinetti_sketch-246x300.jpg 246w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/marinetti_sketch-300x366.jpg 300w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<p>We came up with four main zones that would host primary and secondary divs:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>mouv<\/strong>, named after the first part of the &#8220;mouvement &#8230;&#8221; text.<\/li>\n\n\n\n<li><strong>upper<\/strong> bordered area, which contains <strong>vent<\/strong>, named after the &#8220;vent&#8221; text, and <strong>nega<\/strong>, after the &#8220;negateur &#8230;&#8221; block.\n<ul class=\"wp-block-list\">\n<li>Inside <strong>nega<\/strong>, we find two elements: a big curly brace and the text.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>lower<\/strong> bordered area, which contains <strong>sang<\/strong>, after &#8220;sang&#8221; of course, and <strong>affi<\/strong>, after the &#8220;affirmateur &#8230;&#8221; block.\n<ul class=\"wp-block-list\">\n<li>Inside <strong>affi<\/strong>, two elements: a stack of a brace with rules, and the text.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>kara<\/strong>, named after the first part of the rotated &#8220;karazouc &#8230;&#8221; text.  <\/li>\n<\/ul>\n\n\n\n<p>There will of course be other divs, but this gives us the basis to generate a structure.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Sizing_the_image\"><\/span>Sizing the image<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<div class=\"wp-block-columns has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\" style=\"background-color:#eeeeee\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<p>We will &#8220;trace&#8221; the poem image to create, size, and place those divs, so we want the image to be a logical size. In our build, we will use pixels as a unit of measure \u2014 <strong>px<\/strong>. So we&#8217;ve cropped and obtained a pixel dimension for the image in Photoshop, thusly:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Width: 330 px<\/li>\n\n\n\n<li>Height: 510 px<\/li>\n<\/ul>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"330\" height=\"510\" data-attachment-id=\"4994\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/marinetticss\/marinetti-dunes_1914-copy\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/Marinetti-Dunes_1914-copy.jpg\" data-orig-size=\"330,510\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;1&quot;}\" data-image-title=\"Marinetti-Dunes_1914-copy\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/Marinetti-Dunes_1914-copy.jpg\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/Marinetti-Dunes_1914-copy.jpg\" alt=\"\" class=\"wp-image-4994\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/Marinetti-Dunes_1914-copy.jpg 330w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/Marinetti-Dunes_1914-copy-194x300.jpg 194w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/Marinetti-Dunes_1914-copy-300x464.jpg 300w\" sizes=\"auto, (max-width: 330px) 100vw, 330px\" \/><\/figure>\n<\/div><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\" style=\"background-color:#ddddff\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100%\">\n<p><em><strong>YOUR TURN:<\/strong> Try your hand at developing a scheme and cropping the image, or feel free to use ours.<\/em><\/p>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step_1_Creating_the_basic_HTML_structure\"><\/span>Step 1: Creating the basic HTML structure<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-top is-layout-flow wp-block-column-is-layout-flow\">\n<p>Our first move is to develop the basic structure in HTML, attaching an external CSS file and placing a background image to &#8220;trace&#8221; the poem. See our results here:<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-top has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"background-color:#eeeeee\">\n<p class=\"has-text-align-center\"><strong><em><a href=\"https:\/\/williamcromar.com\/code_samples\/marinetti-animate23\/step1_basic-structure\/marinetti.html\" target=\"_blank\" rel=\"noreferrer noopener\">Visit Step 1 &gt;<\/a><\/em><\/strong><\/p>\n<\/div>\n<\/div>\n\n\n\t<h2 class=\"sp-tab__section_title_4970\"> <\/h2>\n\t\t\t<div id=\"sp-wp-tabs-wrapper_4970\" class=\"sp-tab__lay-default\" data-preloader=\"1\" data-activemode=\"tabs-activator-event-click\" data-anchor_linking=\"1\">\n\t\t\t<div class=\"sp-tab__preloader\">\n\t\t<div class=\"sp-tab__spinner\">\n\t\t\t<div class=\"rect1\"><\/div>\n\t\t\t<div class=\"rect2\"><\/div>\n\t\t\t<div class=\"rect3\"><\/div>\n\t\t\t<div class=\"rect4\"><\/div>\n\t\t\t<div class=\"rect5\"><\/div>\n\t\t<\/div>\n\t<\/div>\n\t<ul class=\"sp-tab__nav sp-tab__nav-tabs\" id=\"sp-tab__ul\" role=\"tablist\">\n\t\t\t\t<li class=\"sp-tab__nav-item\" role=\"presentation\">\n\t\t\t\t<span class=\"sp-tab__nav-link sp-tab__active\" data-sptoggle=\"tab\" for=\"#tab-49701\" role=\"tab\" aria-controls=tab-49701 aria-selected=true tabindex=0>\n\t\t\t\t\t<span class=\"tab_title_area\"><H6 class=\"sp-tab__tab_title\"><span class=\"ez-toc-section\" id=\"Embed\"><\/span><div style=\"background-color: #EEEEEE;padding: 10px;font-size: small\">Embed<\/div><\/H6><\/span>\n\t\t\t\t<\/span>\n\t\t\t<\/li>\n\t\t\t\t\t\t<li class=\"sp-tab__nav-item\" role=\"presentation\">\n\t\t\t\t<span class=\"sp-tab__nav-link\" data-sptoggle=\"tab\" for=\"#tab-49702\" role=\"tab\" aria-controls=tab-49702 aria-selected=true tabindex=0>\n\t\t\t\t\t<span class=\"tab_title_area\"><H6 class=\"sp-tab__tab_title\"><span class=\"ez-toc-section\" id=\"HTML\"><\/span><div style=\"background-color: #EEEEEE;padding: 10px;font-size: small\">HTML<\/div><\/H6><\/span>\n\t\t\t\t<\/span>\n\t\t\t<\/li>\n\t\t\t\t\t\t<li class=\"sp-tab__nav-item\" role=\"presentation\">\n\t\t\t\t<span class=\"sp-tab__nav-link\" data-sptoggle=\"tab\" for=\"#tab-49703\" role=\"tab\" aria-controls=tab-49703 aria-selected=true tabindex=0>\n\t\t\t\t\t<span class=\"tab_title_area\"><H6 class=\"sp-tab__tab_title\"><span class=\"ez-toc-section\" id=\"CSS\"><\/span><div style=\"background-color: #EEEEEE;padding: 10px;font-size: small\">CSS<\/div><\/H6><\/span>\n\t\t\t\t<\/span>\n\t\t\t<\/li>\n\t\t\t<\/ul>\n<div class=\"sp-tab__tab-content\">\n\t\t\t\t<div id=\"tab-49701\" class=\"sp-tab__tab-pane sp-tab__show sp-tab__active\" role=\"tabpanel\">\n\t\t\t\t\t<div class=\"sp-tab-content animated fadeIn\"><p><iframe loading=\"lazy\" style=\"border: 1px #cccccc solid\" src=\"https:\/\/williamcromar.com\/code_samples\/marinetti-animate23\/step1_basic-structure\/marinetti.html\" width=\"100%\" height=\"600px\" frameborder=\"1\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div id=\"tab-49702\" class=\"sp-tab__tab-pane \" role=\"tabpanel\">\n\t\t\t\t\t<div class=\"sp-tab-content animated fadeIn\"><pre>&lt;!doctype html&gt;\r\n&lt;!-- STEP 1 OF MARINETTI.HTML: BASIC STRUCTURE, ATTACH CSS, SET CENTERED TRACING IMAGE AS BACKGROUND --&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;&lt;!-- INDENT AND SPACE LINES FOR HUMAN LEGIBILITY --&gt;\r\n   &lt;meta charset=\"UTF-8\"&gt; &lt;title&gt;Excerpt from Dunes by F.T. Marinetti&lt;\/title&gt;&lt;!-- PROVIDE A TITLE --&gt;\r\n   &lt;link href=\"css\/marinetti.css\" rel=\"stylesheet\" type=\"text\/css\" \/&gt;&lt;!--GENERATE CSS LINK WITH PAGE PROPERTIES: HTML: CLASS: ATTACH STYLE SHEET... --&gt;\r\n\r\n   &lt;!-- GENERATE STYLE WITH PAGE PROPERTIES: APPEARANCE (CSS) AND SELECT BACKGROUND IMAGE WITH NO-REPEAT--&gt;\r\n      &lt;style type=\"text\/css\"&gt; \/* TO SHOW AND HIDE BACKGROUND FOR TRACING, USE A CSS COMMENT START BEFORE background-image - KEEP END COMMENT TO EASE SWITCH *\/\r\n         body { \r\n            background-image: url(images\/Marinetti-Dunes_1914.jpg);\r\n            background-position: center;\r\n            background-attachment: fixed;\r\n            background-repeat: no-repeat; *\/ \r\n         }\/* ADD background-position AND background-attachment BY HAND FOR CENTERING *\/\r\n      &lt;\/style&gt;\r\n\r\n&lt;\/head&gt;\r\n\r\n&lt;body&gt;\r\n\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div id=\"tab-49703\" class=\"sp-tab__tab-pane \" role=\"tabpanel\">\n\t\t\t\t\t<div class=\"sp-tab-content animated fadeIn\"><pre>@charset \"UTF-8\";\r\n\/* STEP 1 OF MARINETTI.CSS: NOTHING TO SEE HERE YET! *\/\r\n\/* CSS Document *\/<\/pre>\n<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\n\n\n\n<p>Notice the code is liberally commented to help you understand the process. In the steps that follow, we suggest visiting the steps at each link and inspecting the code directly in a browser window (in Chrome, we use right-click to access View Page Source in the contextual dropdown menu, and other browsers have similar functionality). For the sake of brevity in the remaining steps, we won&#8217;t show the code in its entirety as we did above, but we will unpack examples and case studies.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Attaching_CSS\"><\/span>Attaching CSS<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>We set up a directory with two files,&nbsp;<strong>marinetti.html<\/strong>&nbsp;and&nbsp;<strong>marinetti.css<\/strong>. The CSS file was placed in a sub-directory named <strong>css<\/strong>. Note in the comments the suggestion to generate the link to the external CSS file in Dreamweaver by using the <strong>Page Properties<\/strong> in the <strong>HTML<\/strong> tab, and finding the <strong>Class<\/strong> button to access <strong>Attach Style Sheet&#8230;<\/strong> in a dropdown menu. We&#8217;ll follow this kind of commenting convention in the source code throughout future steps.<\/p>\n\n\n\n<p>We also provide a <code>&lt;title&gt;<\/code> for the page: <strong>Excerpt from Dunes by F.T. Marinetti<\/strong>.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Tracing_a_background_image\"><\/span>Tracing a background image<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<p>We use a background image to &#8220;trace&#8221; the poem. Defining the background image occurs as a style applied to the <code>body<\/code> tag. The quickest way to generate this is through the <strong>Page Properties<\/strong> palette, under the <strong>Appearance (CSS)<\/strong> tab. Select the <strong>Background image <\/strong>there, checking on <strong>No-repeat<\/strong>. This generates the code:<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<pre class=\"wp-block-code\"><code>&lt;style type=\"text\/css\"&gt;\n   body {\n      background-image: url(images\/Marinetti-Dunes_1914.jpg);\n      background-repeat: no-repeat;\n&lt;\/style&gt;<\/code><\/pre>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<p>We want our background to stay centered, no matter the size of the browser window or device. To achieve that, we add the following:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>background-position: center;<\/code><\/li>\n\n\n\n<li><code>background-attachment: fixed;<\/code><\/li>\n<\/ul>\n\n\n\n<p>We place it in the code as follows:<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<pre class=\"wp-block-code\"><code>&lt;style type=\"text\/css\"&gt;\n   body {\n      background-image: url(images\/Marinetti-Dunes_1914.jpg);\n<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">      background-position: center;\n      background-attachment: fixed;<\/mark>\n      background-repeat: no-repeat;\n&lt;\/style&gt;<\/code><\/pre>\n<\/div>\n<\/div>\n\n\n\n<p>Note also a comment instruction to show and hide the background image for tracing by using the start of a CSS comment \u2014 <strong><code>\/*<\/code><\/strong> \u2014 just before the <code>background-image: url...<\/code> property. We keep the end comment \u2014 <code><strong>*\/<\/strong><\/code> \u2014after the <code>background-repeat: no-repeat;<\/code> property. This makes it very quick to hide and reveal the background image for tracing (don&#8217;t, by the way, bother with the Tracing function you might see in the Page Properties dialog box \u2014 it ain&#8217;t so great). Practice commenting on this block of code, turning it off and on, as you&#8217;ll be doing this a lot in the building of this work!<\/p>\n\n\n\n<div class=\"wp-block-columns has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\" style=\"background-color:#ddddff\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100%\">\n<p><em><strong>YOUR TURN:<\/strong> Build a basic structure as described above. You may copy and paste from our code, but do this step by step so you can see the progress of the work evolve. The comments in the source code will help you do this.<\/em><\/p>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step_2_Create_position_and_size_primary_divs_with_ruled_borders\"><\/span>Step 2: Create, position, and size primary divs with ruled borders<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p>To prepare for real content, we&#8217;re going to define the ruled borders that divide our <strong>mouv<\/strong>, <strong>upper<\/strong>, <strong>lower<\/strong>, and <strong>kara<\/strong> sections. Take a look at the site:<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-top has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"background-color:#eeeeee\">\n<p class=\"has-text-align-center\"><strong><em><a href=\"https:\/\/williamcromar.com\/code_samples\/marinetti-animate23\/step2_primary-divs\/marinetti.html\" target=\"_blank\" rel=\"noreferrer noopener\">Visit Step 2 &gt;<\/a><\/em><\/strong><\/p>\n<\/div>\n<\/div>\n\n\n\n<p>We used this process to build the source code you see on the site:<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<ul class=\"wp-block-list\">\n<li>First, we used semantic HTML to provide a poem structure:<\/li>\n<\/ul>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<pre class=\"wp-block-code\"><code>&lt;body&gt;\n&lt;container&gt;\n&lt;main&gt;\n&lt;\/main&gt;\n&lt;\/container&gt;\n&lt;\/body&gt;\n<\/code><\/pre>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<ul class=\"wp-block-list\">\n<li>The <code>&lt;main&gt;<\/code> tag is positioned using internal CSS. Note it is sized to be the same pixel dimensions as the background image.<\/li>\n\n\n\n<li>Also note the presence of a <code>relative<\/code> value for the <code>position<\/code>, allowing <code>&lt;main&gt;<\/code> to move along with the background.<\/li>\n\n\n\n<li>There&#8217;s also background color applied here. More about that later!<\/li>\n<\/ul>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<pre class=\"wp-block-code\"><code>main {\n   position: relative;\n   height: 510px;\n   width: 330px;\n   background: #33333320;\n}<\/code><\/pre>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<ul class=\"wp-block-list\">\n<li>Next, inside <code>&lt;main&gt;<\/code>, we&#8217;ll add a bunch of <code>&lt;div&gt;<\/code> tags correlating to each section we analyzed.<\/li>\n\n\n\n<li>Notice the comments (abbreviated here: commenting is more robust in the actual source code!). These help us understand there are four main sections: <strong>MOUV<\/strong>, <strong>UPPER<\/strong>, <strong>LOWER<\/strong>, and <strong>KARA<\/strong>.<\/li>\n\n\n\n<li><strong>UPPER<\/strong> contains the nested <code>&lt;div&gt;<\/code> tags for the sub-sections <strong>VENT<\/strong> and <strong>NEGA<\/strong>.<\/li>\n\n\n\n<li><strong>LOWER<\/strong> contains the nested <code>&lt;div&gt;<\/code> tags for the sub-sections <strong>SANG<\/strong> and <strong>AFFI<\/strong>.<\/li>\n\n\n\n<li>Note the tabbing that helps us understand the nesting relationships!<\/li>\n\n\n\n<li>Finally here, note the presence of placeholder text \u2014 <strong>*NAME<\/strong> \u2014 to help us identify the divs visually, as well as where actual content will be placed. <strong>UPPER<\/strong> and <strong>LOWER<\/strong> will not receive content: their sub-sections will.<\/li>\n<\/ul>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<pre class=\"wp-block-code\"><code>&lt;main&gt;\n   &lt;!-- MOUV --&gt;\n   &lt;div&gt;\n      *MOUV\n   &lt;\/div&gt;\n   &lt;!-- UPPER --&gt;\n   &lt;div&gt;\n      &lt;div&gt;\n         *VENT\n      &lt;\/div&gt;\n      &lt;div&gt;\n         *NEGA\n      &lt;\/div&gt;\n   &lt;\/div&gt;\n   &lt;!-- LOWER --&gt;\n   &lt;div&gt;\n      &lt;div&gt;\n         *SANG\n      &lt;\/div&gt;\n      &lt;div&gt;\n         *AFFI\n      &lt;\/div&gt;\n   &lt;\/div&gt;\n   &lt;!-- KARA --&gt;\n   &lt;div&gt;\n      *KARA\n   &lt;\/div&gt;\n&lt;\/main&gt;<\/code><\/pre>\n<\/div>\n<\/div>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"IDs_versus_classes\"><\/span>IDs versus classes<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>If you&#8217;re building a file along with this, you may notice in Dreamweaver that the <code>&lt;div&gt;<\/code> tags just stack on one another inside <code>&lt;main&gt;<\/code>. How do we size and position them, and how do we provide ruled borders where we see them in the poem?<\/p>\n\n\n\n<p>This is where the distinction between IDs and classes becomes very useful. Recall that an ID is a unique identifier: that is, you can only use it one time in a file. A class, on the other hand, is reusable within a page, and among many pages if needed. So what kind of styling is best to invoke with which? As a general rule, with some minor exceptions, we do the following here:<\/p>\n\n\n\n<div class=\"wp-block-columns has-white-background-color has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-columns has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\" style=\"background-color:#eeeeee\">\n<div class=\"wp-block-column has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"background-color:#eeeeee\">\n<p><strong>UNIQUE: <\/strong><\/p>\n\n\n\n<p><strong>IDs, internal CSS<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Positioning of a div<\/li>\n\n\n\n<li>Size of a div<\/li>\n\n\n\n<li>Margin or padding<\/li>\n\n\n\n<li>Line or letter spacing<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-columns has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\" style=\"background-color:#eeeeee\">\n<div class=\"wp-block-column has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"background-color:#eeeeee\">\n<p><strong>GENERAL:<\/strong><\/p>\n\n\n\n<p><strong>Classes, external CSS<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Page and text-centering<\/li>\n\n\n\n<li>Border styling<\/li>\n\n\n\n<li>Font assignments<\/li>\n\n\n\n<li>Transforms<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<h5 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Sizing_and_placing_divs_with_IDs\"><\/span>Sizing and placing divs with IDs<span class=\"ez-toc-section-end\"><\/span><\/h5>\n\n\n\n<p>In this step, we&#8217;re concerned with sizes and locations. Each <code>&lt;div&gt;<\/code> is uniquely sized and positioned using an <code>#id<\/code> found in the internal CSS for the page. We&#8217;ll use the code for <strong>LOWER<\/strong> as an example here.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<ul class=\"wp-block-list\">\n<li>Unlike <code>main<\/code> above, all <code>position<\/code> values are <code>absolute<\/code> for every <code>id<\/code>. This means they won&#8217;t shift about within <code>main<\/code>.<\/li>\n\n\n\n<li>If needed, a <code>top<\/code> and a <code>left<\/code> will create a fixed coordinate within <code>main<\/code> for each <code>id<\/code>. Not every <code>id<\/code> will need this! Note which do and which don&#8217;t in the source code.<\/li>\n\n\n\n<li>In all cases, each <code>id<\/code> will have a unique <code>width<\/code> and <code>height<\/code> value based on tracing the background image.<\/li>\n<\/ul>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<pre class=\"wp-block-code\"><code>#lower {\t\n   position: absolute;\n   top: 305px;\n   left: 86px;\n   width: 200px;\n   height: 204px;\n}\n\n.......\n\n&lt;div id=\"lower\"&gt; ...\n&lt;\/div&gt;<\/code><\/pre>\n<\/div>\n<\/div>\n\n\n\n<h5 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Styling_ruled_borders_with_classes\"><\/span>Styling ruled borders with classes<span class=\"ez-toc-section-end\"><\/span><\/h5>\n\n\n\n<p>Several divs can be styled to define the ruled borders we see holding the middle sections of the poem. <strong>MOUV<\/strong>, <strong>UPPER<\/strong>, <strong>LOWER<\/strong>, and <strong>KARA<\/strong> each contain such a border. These borders may be useful in another context: for example, if we were setting a bunch of Marinetti poems that contained such borders, they could be reused. So we used classes and made them available externally. Again, using <strong>LOWER<\/strong> as our example:<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<ul class=\"wp-block-list\">\n<li>Since its properties may be generally useful, we don&#8217;t want a class name that suggests its association with <strong>LOWER<\/strong>. Instead, we used a descriptor that&#8217;s clear enough to be understood but not so long as to make it difficult to write or bloat the code. Here, we used <code>noBorderBottom<\/code>.<\/li>\n\n\n\n<li>Note we defined the right, top, and left as containing a 1-pixel solid border. Note the pattern for each border defined in the source code at the site.<\/li>\n\n\n\n<li>We applied the class to <strong>LOWER<\/strong> back in the HTML file:<\/li>\n<\/ul>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<pre class=\"wp-block-code\"><code>.noBorderBottom {\n   border-right-width: 1px;\n   border-top-width: 1px;\n   border-left-width: 1px;\n   border-right-style: solid;\n   border-top-style: solid;\n   border-left-style: solid;\n}\n\n.......\n\n&lt;div id=\"lower\" class=\"noBorderBottom\"&gt; ...\n&lt;\/div&gt;\n<\/code><\/pre>\n<\/div>\n<\/div>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Temporary_background_colors\"><\/span>Temporary background colors<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>In many instances in the source code, you&#8217;ll see a transparent gray color applied to each <code>&lt;div&gt;<\/code> that will receive content. We did this as a temporary measure, to allow us to see the sizes of the divs as they align with the background image. Later, when we were satisfied that the divs were defined correctly, we deleted the background color. <strong>LOWER<\/strong> had no color because it has a border and otherwise no content. So we&#8217;ll use one of its children, <strong>SANG<\/strong>, as our case study:<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<ul class=\"wp-block-list\">\n<li>The background is defined as a <a href=\"https:\/\/www.w3schools.com\/cssref\/css_colors_legal.php\" target=\"_blank\" rel=\"noreferrer noopener\">hexadecimal color with transparency<\/a>. This convention simply adds 2 digits to the end of a regular #RRGGBB value set. <\/li>\n\n\n\n<li>In our build, we use #333333 as a light gray and add 20 to indicate 20% opacity:<\/li>\n<\/ul>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<pre class=\"wp-block-code\"><code>#sang {\n   position: absolute;\n   width: 58px;\n   height: 204px;\n   background: #33333320;\n}<\/code><\/pre>\n<\/div>\n<\/div>\n\n\n\n<p>We&#8217;ll see other instances of background colors used as a visual aid in future steps.<\/p>\n\n\n\n<iframe loading=\"lazy\" src=\"https:\/\/williamcromar.com\/code_samples\/marinetti-animate23\/step2_primary-divs\/marinetti.html\" style=\"border:1px #cccccc solid;\" name=\"myiFrame\" scrolling=\"no\" frameborder=\"1\" marginheight=\"0px\" marginwidth=\"0px\" height=\"600px\" width=\"100%\" allowfullscreen><\/iframe>\n\n\n\n<div class=\"wp-block-columns has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\" style=\"background-color:#ddddff\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100%\">\n<p><em><strong>YOUR TURN:<\/strong> Build a basic semantic HTML structure as described above, and fill it with appropriate divs.  For each div, create IDs and classes as described. You may copy and paste from our code, but do this ONE BY ONE with each div so you can see the progress. It&#8217;s a good idea to play with the numerical values for various properties to see how this affects size and placement but restore these experiments with the values from our code that work. Comments in the source code will assist you.<\/em><\/p>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step_3_Adding_unformatted_content_with_secondary_divs\"><\/span>Step 3: Adding unformatted content with secondary divs<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<p>This step is a fairly straightforward insertion of the poem text.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-top has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"background-color:#eeeeee;flex-basis:50%\">\n<p class=\"has-text-align-center\"><strong><em><a href=\"https:\/\/williamcromar.com\/code_samples\/marinetti-animate23\/step3_unformatted-content\/marinetti.html\" target=\"_blank\" rel=\"noreferrer noopener\">Visit Step 3 &gt;<\/a><\/em><\/strong><\/p>\n<\/div>\n<\/div>\n\n\n\n<p>The text, seen below, is written out completely unformatted for you to copy and paste into the HTML document:<\/p>\n\n\n\n<div class=\"wp-block-columns has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\" style=\"background-color:#eeeeee\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p>mouvement de 2 pistons<\/p>\n\n\n\n<p>vent { n\u00e9gateur paresse inertie geler tout par des \u00e8toiles litt\u00e9raires deracin\u00e9es de la chair (nuit livresque) enterrer tout avec odeur d&#8217;aisselles matelas de parfums seins cuits dans le plaisir + 7000 raisonnement sceptiques<\/p>\n\n\n\n<p>sang |{| affirmateur optimisme force repousser le vent-pessimiste-chaud-ou-froid aller sans but pour faire vivre courir etre<\/p>\n\n\n\n<p>karazouc-zouc-zouc<\/p>\n\n\n\n<p>nadi-nadi-aaaaaaaaaaaaaaaaaa<\/p>\n<\/div>\n<\/div>\n\n\n\n<p>See how the content changes when stripped of form? By the way, if you&#8217;re curious about the meaning and can&#8217;t read French, copy and paste it into&nbsp;<a href=\"https:\/\/translate.google.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Google Translate<\/a>.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<ul class=\"wp-block-list\">\n<li>The secret sauce here was not just to paste the content into the existing labeled divs, but to place it in a nesting div in every case. <\/li>\n\n\n\n<li>Using <strong>SANG<\/strong> as a case study again, a typical switch-out is shown in red:<\/li>\n<\/ul>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<pre class=\"wp-block-code\"><code>&lt;div id=\"sang\"&gt;\n<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">   *SANG\n<\/mark>&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p class=\"has-text-align-left\">&#8230; turns into this:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div id=\"sang\"&gt;\n<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">   &lt;div&gt;\n      sang\n   &lt;\/div&gt;\n<\/mark>&lt;\/div&gt;<\/code><\/pre>\n<\/div>\n<\/div>\n\n\n\n<p>At the site, once the text is inserted, you can see the content beginning to organize itself. It&#8217;s somewhat orderly, even if it&#8217;s not yet too expressive. You might be troubled about what&#8217;s happening in <strong>KARA<\/strong>, but it will iron itself out soon enough!<\/p>\n\n\n\n<iframe loading=\"lazy\" src=\"https:\/\/williamcromar.com\/code_samples\/marinetti-animate23\/step3_unformatted-content\/marinetti.html\" style=\"border:1px #cccccc solid;\" name=\"myiFrame\" scrolling=\"no\" frameborder=\"1\" marginheight=\"0px\" marginwidth=\"0px\" height=\"600px\" width=\"100%\" allowfullscreen><\/iframe>\n\n\n\n<div class=\"wp-block-columns has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\" style=\"background-color:#ddddff\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100%\">\n<p><em><strong>YOUR TURN:<\/strong> Copy and paste the poem text into the appropriate areas, making sure each is wrapped in its own nested div as illustrated. You may copy and paste from the source code, but as always, do so ONE BY ONE to watch it grow!<\/em><\/p>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step_4_Justifying_content\"><\/span>Step 4: Justifying content<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<p>Our first bit of real text styling involves a good bit of justification. See the file and source code here:<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-top has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"background-color:#eeeeee;flex-basis:50%\">\n<p class=\"has-text-align-center\"><strong><em><a href=\"https:\/\/williamcromar.com\/code_samples\/marinetti-animate23\/step4_content-centering\/marinetti.html\" target=\"_blank\" rel=\"noreferrer noopener\">Visit Step 4 &gt;<\/a><\/em><\/strong><\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<ul class=\"wp-block-list\">\n<li>Each <code>&lt;div&gt;<\/code> with text inside got a unique id for size and position. With text, the names follow a convention like <code>#nameText<\/code>, with the name usually being the name of the parent div. An example using <strong>SANG<\/strong> again:<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Note regarding the <code>margin-top property<\/code> here: <code>90px<\/code> provided an approximate vertical position that we refined later with font and font size assignments. CSS can be rather tweaky!<\/li>\n<\/ul>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<pre class=\"wp-block-code\"><code>\t\t\t\t#sangText {\n   position: absolute;\n   width: 58px;\n   margin-top: 90px;\n   background: #33333320;\n}\n\n.......\n\n&lt;div id=\"sang\"&gt;\n   &lt;div <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">id=\"sangText\"<\/mark>&gt;\n      sang\n   &lt;\/div&gt;\n&lt;\/div&gt;<\/code><\/pre>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<ul class=\"wp-block-list\">\n<li>In the case of <strong>MOUV<\/strong>, <strong>VENT<\/strong>, <strong>SANG<\/strong>, and <strong>all the brace<\/strong> divs, we&#8217;ve applied a class we called <code>.centertext<\/code> as a reusable snippet in external CSS. <\/li>\n\n\n\n<li><strong>SANG<\/strong> again provides the sample:<\/li>\n<\/ul>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<pre class=\"wp-block-code\"><code>.centerText {\n\tdisplay: flex;\n\talign-items: center;\n\ttext-align: center;\n\tjustify-content: center;\n}\n\n.......\n\n&lt;div id=\"sangText\" <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">class=\"centerText\"<\/mark>&gt;\n   sang\n&lt;\/div&gt;<\/code><\/pre>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<ul class=\"wp-block-list\">\n<li>In the case of <strong>NEGA<\/strong>, <strong>AFFI<\/strong>, and <strong>KARA<\/strong>, each one stayed at a default left-justified for the time being, even though we can see that <strong>NEGA<\/strong> and <strong>AFFI<\/strong> are (mostly) <a href=\"https:\/\/en.wiktionary.org\/wiki\/forced_justified#English\" target=\"_blank\" rel=\"noreferrer noopener\">forced justified<\/a> (stretching from margin to margin), and <strong>KARA<\/strong> is eventually <a href=\"https:\/\/en.wiktionary.org\/wiki\/right-justified\" target=\"_blank\" rel=\"noreferrer noopener\">right justified<\/a>. Each did, however, receive a class: <code>basicStyle<\/code>, which consisted only of the <code>font-size<\/code> property for the time being.<\/li>\n\n\n\n<li>In <strong>NEGA<\/strong> and <strong>AFFI<\/strong>, the text was broken into separate lines with a line break <code>&lt;br \/&gt;<\/code> to enforce justification. <\/li>\n\n\n\n<li>Hyphens ( <strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">&#8211;<\/mark><\/strong> ) are introduced wherever the poem performs a word-wrap. Note carefully some of the text already comes with hyphens!<\/li>\n\n\n\n<li><strong>AFFI<\/strong> provides the case study:<\/li>\n<\/ul>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<pre class=\"wp-block-code\"><code>.basicStyle {\n   font-size: 14px;\n}\n\n.......\n\n&lt;div id=\"affiText\" <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">class=\"basicStyle\"<\/mark>&gt;\n   affirmateur<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">&lt;br \/&gt;<\/mark>\n   optimisme force<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">&lt;br \/&gt;<\/mark>\n   repousser le vent-<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">&lt;br \/&gt;<\/mark>\n   pessimiste-chaud-<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">&lt;br \/&gt;<\/mark>\n   ou-froid<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">&lt;br \/&gt;<\/mark>\n   aller sans but<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">&lt;br \/&gt;<\/mark>\n   pour faire vi<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">-&lt;br \/&gt;<\/mark>\n   vre courir<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">&lt;br \/&gt;<\/mark>\n   etre\n&lt;\/div&gt;<\/code><\/pre>\n<\/div>\n<\/div>\n\n\n\n<p>Note the use of some new background colors among the <strong>braces<\/strong> and in <strong>KARA<\/strong>. These consist of even more deeply nested divs, and to keep things straight, gray just won&#8217;t cut it anymore! So we have a red, green, and blue scheme to help us map these divs.<\/p>\n\n\n\n<iframe loading=\"lazy\" src=\"https:\/\/williamcromar.com\/code_samples\/marinetti-animate23\/step4_content-centering\/marinetti.html\" style=\"border:1px #cccccc solid;\" name=\"myiFrame\" scrolling=\"no\" frameborder=\"1\" marginheight=\"0px\" marginwidth=\"0px\" height=\"600px\" width=\"100%\" allowfullscreen><\/iframe>\n\n\n\n<div class=\"wp-block-columns has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\" style=\"background-color:#ddddff\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100%\">\n<p><em><strong>YOUR TURN:<\/strong> Develop IDs and classes as described above and attach them to appropriate divs. Copy and paste, if desired, and do so ONE BY ONE if you wish to see it evolve.<\/em><\/p>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step_5_Adding_and_sizing_typefaces\"><\/span>Step 5: Adding and sizing typefaces<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<p>We got deep in the weeds trying to find the right fonts to match some of these turn-of-the-last-century French Art Nouveau-inspired fonts. This can take some time!<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-top is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<p class=\"has-text-align-center has-background\" style=\"background-color:#eeeeee\"><strong><em><a href=\"https:\/\/williamcromar.com\/code_samples\/marinetti-animate23\/step5_fonts-and-size\/marinetti.html\" target=\"_blank\" rel=\"noreferrer noopener\">Visit Step 5 &gt;<\/a><\/em><\/strong><\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<p>To make sure the client browser displays our work correctly, we relied on hosting fonts right in our directory. We created a fonts folder and placed each font family in its own folder, to allow Dreamweaver to attach the font in external CSS. <\/p>\n\n\n\n<p>You can see it took an astounding <strong>eight<\/strong> fonts to properly (or at least closely) represent the typography of the original!<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"784\" height=\"1024\" data-attachment-id=\"5034\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/marinetticss\/fonts-in-directory\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/fonts-in-directory.png\" data-orig-size=\"856,1118\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"fonts-in-directory\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/fonts-in-directory-784x1024.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/fonts-in-directory-784x1024.png\" alt=\"\" class=\"wp-image-5034\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/fonts-in-directory-784x1024.png 784w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/fonts-in-directory-230x300.png 230w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/fonts-in-directory-768x1003.png 768w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/fonts-in-directory-300x392.png 300w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/12\/fonts-in-directory.png 856w\" sizes=\"auto, (max-width: 784px) 100vw, 784px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Searching_for_fonts\"><\/span>Searching for fonts<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>Where did these fonts come from? There are millions to choose from, some with very restrictive licensing and a hefty price. For our build, we limited our selections to those for which we could find a license to host at no cost. This does limit the field considerably, but there are still thousands!<\/p>\n\n\n\n<h5 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Google_Fonts\"><\/span>Google Fonts<span class=\"ez-toc-section-end\"><\/span><\/h5>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<p>One of the best places to find free-license fonts is <a href=\"https:\/\/fonts.google.com\/\"><strong>Google Fonts<\/strong><\/a>. With Google Fonts, you have the option of downloading and self-hosting (which we did), or calling the font externally from Google&#8217;s servers. That can save you some space, but it can also affect performance a bit, so there are tradeoffs. We selected these Google Fonts to download and host:<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<div class=\"wp-block-columns has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\" style=\"background-color:#eeeeee\">\n<div class=\"wp-block-column has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"background-color:#eeeeee\">\n<ul class=\"wp-block-list\">\n<li><strong><a href=\"https:\/\/fonts.google.com\/specimen\/EB+Garamond\" target=\"_blank\" rel=\"noreferrer noopener\">EB Garamond Variable<\/a><\/strong> | A variable-width font allows you to host one file that can be styled using variable weights (expressed as 100 &#8211; 900 from thin to bold). Used as a default.<\/li>\n\n\n\n<li><strong>EB Garamond Extra Bold<\/strong> | This is a static (fixed-width) font from the same download, one that is bolder than the 900 above. Used as a default bold.<\/li>\n\n\n\n<li><a href=\"https:\/\/fonts.google.com\/specimen\/Roboto\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Roboto<\/strong><\/a> | Used as the sans-serif for <strong>NADI<\/strong>.<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<h5 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Searching_with_IdentiFont\"><\/span>Searching with IdentiFont<span class=\"ez-toc-section-end\"><\/span><\/h5>\n\n\n\n<p>Font finding is a needle-in-a-haystack proposition. Fortunately, there are helper sites that can assist. Many are using AI to assist with images of text styled with an unknown font, which you can upload. One of the best is <strong><a href=\"http:\/\/www.identifont.com\/tools.html\" target=\"_blank\" rel=\"noreferrer noopener\">IdentiFont.com <\/a><\/strong><a href=\"http:\/\/www.identifont.com\/tools.html\" target=\"_blank\" rel=\"noreferrer noopener\">with a wide array of tools<\/a>.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<p>We found the following using <strong>Identi-Font<\/strong>, then sought out free license hosting sites. In several instances, the free licenses limited use to commercial-free. This site is part of the <a href=\"https:\/\/en.wikipedia.org\/wiki\/Gift_economy#:~:text=A%20gift%20economy%20or%20gift,for%20immediate%20or%20future%20rewards.\" target=\"_blank\" rel=\"noreferrer noopener\">gift economy<\/a>, so we are free to use such licenses. A couple came with <a href=\"https:\/\/creativecommons.org\/licenses\/by-sa\/4.0\/deed.en\" target=\"_blank\" rel=\"noreferrer noopener\">Creative Commons share-alike<\/a> requirements, which we complied with (see the section on <strong>Licensing<\/strong> below).<\/p>\n\n\n\n<p>Only seven? One font is missing from this list! We searched at the very end of the project for a special serif &#8220;<strong>T<\/strong>&#8221; as we see in <strong>VENT<\/strong>, so that gets added near the end.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"background-color:#eeeeee;flex-basis:50%\">\n<div class=\"wp-block-columns has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\" style=\"background-color:#eeeeee\">\n<div class=\"wp-block-column has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"background-color:#eeeeee\">\n<p><strong>Two from <a href=\"https:\/\/fontsgeek.com\/\">FontsGeek.com<\/a><\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><a href=\"https:\/\/fontsgeek.com\/hadrianbold-font\" target=\"_blank\" rel=\"noreferrer noopener\">Hadrianbold<\/a><\/strong> | Used as the tall sans-serif for <strong>MOUV<\/strong>.<\/li>\n\n\n\n<li><strong><a href=\"https:\/\/fontsgeek.com\/century-condensed-ssi-font\" target=\"_blank\" rel=\"noreferrer noopener\">Century Condensed SSi<\/a><\/strong> | Used as tall all-caps for <strong>NEGA<\/strong> and <strong>AFFI<\/strong>.<\/li>\n<\/ul>\n\n\n\n<p><strong>One from <a href=\"https:\/\/xfonts.pro\/\" target=\"_blank\" rel=\"noreferrer noopener\">XFonts.pro<\/a>:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><a href=\"https:\/\/xfonts.pro\/fonts\/akkordeon_four\" target=\"_blank\" rel=\"noreferrer noopener\">Akkordeon Four<\/a><\/strong> | Used as the tall all-caps for <strong>VENT<\/strong> and <strong>SANG<\/strong>.<\/li>\n<\/ul>\n\n\n\n<p><strong>One from <a href=\"https:\/\/www.1001fonts.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">1001Fonts.com<\/a>:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><a href=\"https:\/\/www.1001fonts.com\/wremena-font.html\">Wremena Light<\/a><\/strong> | Used for the curly braces at <strong>NEGA<\/strong> and <strong>AFFI<\/strong>.<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<ul class=\"wp-block-list\">\n<li>Fonts are &#8220;called&#8221; using a convention like the one seen here.<\/li>\n\n\n\n<li>The <code>url (\"...\/fonts\/etc.\")<\/code> convention knows how to find fonts in the folder we named <strong>fonts<\/strong> in our directory.<\/li>\n\n\n\n<li>We placed this in external CSS to avoid having to create font references in the HTML.<\/li>\n<\/ul>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<pre class=\"wp-block-code\"><code>@font-face {\n   font-family: EB Garamond;\n   src: url( \"..\/fonts\/eb_garamond\/EBGaramond-VariableFont_wght.ttf \");\n}<\/code><\/pre>\n<\/div>\n<\/div>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"CSS_%E2%80%9Ctypesetting%E2%80%9D_properties\"><\/span>CSS &#8220;typesetting&#8221; properties<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>If you&#8217;re coming at CSS from the standpoint of traditional typesetting, or even from digital typesetting in a program like Illustrator or InDesign, you&#8217;ll feel a bit lost getting used to the terminology in CSS. There is a <code>font-kerning<\/code> property that uses the <strong>kerning<\/strong> data stored inside a font, but we didn&#8217;t use this in our build. We used <code>letter-spacing<\/code> as the CSS equivalent of <strong>tracking<\/strong>. For <strong>leading<\/strong>, the space between baselines in traditional typographic terminology, CSS uses a property called <code>line-height<\/code>.<\/p>\n\n\n\n<p>For letter casing, CSS uses the <code>text-transform<\/code> property. Its values include some that are easy to understand, like <code>uppercase<\/code> and <code>lowercase<\/code> and <code>capitalize<\/code>. But if you&#8217;re looking for <strong>title case<\/strong> in CSS don&#8217;t bother. And, confusingly, if you want to create <strong>small caps<\/strong>, that&#8217;s a different property altogether: <code>font-variant<\/code> with a value of <code>small-caps<\/code>.<\/p>\n\n\n\n<p>How all of these are applied in our build was context-dependent and involved a good bit of heuristic exploration. In some cases, the fonts we chose simply didn&#8217;t have the extreme proportions found in Marinetti&#8217;s type. Here&#8217;s one case study:<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<ul class=\"wp-block-list\">\n<li>For <strong>MOUV<\/strong>, we deduced the following code, which we wrote into external CSS as a class named mouvStyle, a naming convention we followed often for this step.<\/li>\n\n\n\n<li>Take a close look at each of the text styles you see in the external CSS file, making note of where you find variations on <code>letter-spacing<\/code>, <code>line-height<\/code>, <code>font-size<\/code>, <code>text-transform<\/code>, and other properties.<\/li>\n<\/ul>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<pre class=\"wp-block-code\"><code>.mouvStyle {\n   font-family: Hadrianbold Regular;\n   font-size: 31px;\n   line-height: 45.4px;\n   text-transform: uppercase;\n}<\/code><\/pre>\n<\/div>\n<\/div>\n\n\n\n<h5 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Choose_the_height_first\"><\/span>Choose the height first!<span class=\"ez-toc-section-end\"><\/span><\/h5>\n\n\n\n<p>In a few very conspicuous places \u2014 <strong>MOUV<\/strong> and the curly braces at <strong>NEGA<\/strong> and <strong>AFFI<\/strong> \u2014 it was impossible to get the height-width ratio correct. The chosen fonts, while narrow, were not narrow enough to emulate Marinetti&#8217;s typography. We found a way to correct that in the next step. The best idea for the time being was to set the heights correctly first, and let the widths fall where they may, even though they are a bit unsightly!<\/p>\n\n\n\n<p>Another typesetting refinement applied here is a forced justify, which we mentioned earlier. It&#8217;s applied as a class called <strong>justifyText<\/strong> to the <strong>negaText<\/strong> and <strong>affiText<\/strong> divs. To help it, we add <code>white-space: nowrap;<\/code> to the <code>basicStyle<\/code> class.<\/p>\n\n\n\n<iframe loading=\"lazy\" src=\"https:\/\/williamcromar.com\/code_samples\/marinetti-animate23\/step5_fonts-and-size\/marinetti.html\" style=\"border:1px #cccccc solid;\" name=\"myiFrame\" scrolling=\"no\" frameborder=\"1\" marginheight=\"0px\" marginwidth=\"0px\" height=\"600px\" width=\"100%\" allowfullscreen><\/iframe>\n\n\n\n<div class=\"wp-block-columns has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\" style=\"background-color:#ddddff\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100%\">\n<p><em><strong>YOUR TURN:<\/strong> Create font attachments and develop font style classes as seen in the sample file. Short-cut the length of your font search by using our recommendations above. Apply the classes as appropriate, copy-pasting them ONE BY ONE to observe the changes.<\/em><\/p>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step_6_Styling_transform_scale_and_rotate\"><\/span>Step 6: Styling transform scale and rotate<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<p>Things start to take shape with the use of <code>transform<\/code> in this step.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-top has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"background-color:#eeeeee;flex-basis:50%\">\n<p class=\"has-text-align-center\"><strong><em><a href=\"https:\/\/williamcromar.com\/code_samples\/marinetti-animate23\/step6_transforms-and-rotate\/marinetti.html\" target=\"_blank\" rel=\"noreferrer noopener\">Visit Step 6 &gt;<\/a><\/em><\/strong><\/p>\n<\/div>\n<\/div>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Non-uniform_scaling_a_forgivable_type-crime\"><\/span>Non-uniform scaling: a forgivable type-crime?<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>We used a non-uniform scale to shrink the widths of <strong>MOUV<\/strong> text and braces at <strong>NEGA<\/strong> and <strong>AFFI<\/strong>. Now, some will rightly argue that non-uniform scaling is a <a href=\"https:\/\/thefutur.com\/content\/crimes-of-typography\" target=\"_blank\" rel=\"noreferrer noopener\">type-crime<\/a>. But in this context, we felt it was a forgivable sin. We&#8217;ll use the curly brace under <strong>NEGA<\/strong> as a sample:<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<ul class=\"wp-block-list\">\n<li>This curly brace is the largest on the page, and massively too wide. We set <code>font-size<\/code> to match the image height and tweaked <code>margin<\/code> settings.<\/li>\n\n\n\n<li>Then we super-squeezed the horizontal <code>transform: scale<\/code> by a factor of 0.12-to-1.<\/li>\n\n\n\n<li>We finished by naming the class <code>negaBracketStyle<\/code> and applying it to the nested div holding the curly brace:<\/li>\n<\/ul>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<pre class=\"wp-block-code\"><code>.negaBracketStyle {\n\tfont-family: Wremena Light;\n\tfont-size: 330px;\n\tmargin-bottom: 5px;\n\tmargin-right: 3px;\n\ttransform: scale(0.12,1);\n}\n\n.......\n\n&lt;div id=\"negaBracket\" class=\"centerText\"&gt;\n   &lt;div <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">class=\"negaBracketStyle\"<\/mark>&gt;\n      {\n   &lt;\/div&gt;\n&lt;\/div&gt;<\/code><\/pre>\n<\/div>\n<\/div>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Rotating_type\"><\/span>Rotating type<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>We needed to <code>transform: rotate<\/code> the contents of <strong>KARA<\/strong> to orient it to the right-side div content in a final act of transformation.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<ul class=\"wp-block-list\">\n<li>We wrote a class named <code>rotateStyle<\/code> with a <code>transform<\/code> property set at  -90 degree <code>rotate<\/code> value.<\/li>\n\n\n\n<li>Then we added it next to the <code>basicStyle<\/code> class assigned to the nested content div in <strong>KARA<\/strong>:<\/li>\n<\/ul>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<pre class=\"wp-block-code\"><code>.rotateStyle {\n   transform: rotate(-90deg);\n}\n\n.......\n\n&lt;div id=\"kara\" class=\"borderLeft\"&gt;\n   &lt;div class=\"basicStyle <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">rotateStyle<\/mark>\"&gt;\n      &lt;div id=\"karaText\" class=\"smallBoldStyle\"&gt;\n         karazouc\u2013zouc\u2013zouc\n      &lt;\/div&gt;\n      &lt;div id=\"nadiText\" class=\"nadiStyle\"&gt;\n         nadi\u2013nadi\u2013aaaaaaaaaaaaaaaaaa\n       &lt;\/div&gt;\n   &lt;\/div&gt;\n&lt;\/div&gt;<\/code><\/pre>\n<\/div>\n<\/div>\n\n\n\n<iframe loading=\"lazy\" src=\"https:\/\/williamcromar.com\/code_samples\/marinetti-animate23\/step6_transforms-and-rotate\/marinetti.html\" style=\"border:1px #cccccc solid;\" name=\"myiFrame\" scrolling=\"no\" frameborder=\"1\" marginheight=\"0px\" marginwidth=\"0px\" height=\"600px\" width=\"100%\" allowfullscreen><\/iframe>\n\n\n\n<div class=\"wp-block-columns has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\" style=\"background-color:#ddddff\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100%\">\n<p><em><strong>YOUR TURN:<\/strong> Create transforms as per the sample site. Apply the classes as appropriate, copy-pasting them ONE BY ONE to observe the changes.<\/em><\/p>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step_7_Spans_inline_styles_and_colors\"><\/span>Step 7: Spans, inline styles, and colors<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p>Almost done! One special div supported the addition of the distinctive serif &#8220;<strong>T<\/strong>&#8221; in <strong>VENT<\/strong>. One-off stylings that don&#8217;t justify the creation of a class were supported by spans, and we wrapped up the styling by creating ink and paper colors.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-top has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"background-color:#eeeeee\">\n<p class=\"has-text-align-center\"><strong><em><a href=\"https:\/\/williamcromar.com\/code_samples\/marinetti-animate23\/step7_inline-css-and-colors\/marinetti.html\" target=\"_blank\" rel=\"noreferrer noopener\">Visit Step 7 &gt;<\/a><\/em><\/strong><\/p>\n<\/div>\n<\/div>\n\n\n\n<p>Most of our work here is tweaky but important refinement, starting with that outlier &#8220;<strong>T<\/strong>.&#8221; By now you might be pretty proficient at interpreting code: can you find the ID, class, new div, and font-face assigned to solve this? We will reveal at least this much: the eighth and final font for this is <strong>Imprimeur Classique EF <\/strong>found at <strong><a href=\"https:\/\/www.onlinewebfonts.com\/download\/54235037b72330071b5ed829fb919fbb\" target=\"_blank\" rel=\"noreferrer noopener\">OnlineWebFonts.com<\/a><\/strong>.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"When_is_it_OK_to_use_inline_styles\"><\/span>When is it OK to use inline styles?<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>Many of the changes here occur on the line-by-line tweaking in the text blocks in <strong>NEGA<\/strong>, <strong>AFFI<\/strong>, and <strong>KARA<\/strong>. Take some time to analyze what&#8217;s going on with the use of <code>&lt;spans><\/code> and inline styles applied to them.<\/p>\n\n\n\n<p>Why solve these using inline CSS? Don&#8217;t we try our best not to use it? As a general rule, one should avoid inline styling. However, for one-off instances of a line-height change here or there, it takes more code to write it up as a new class or ID, and then apply that to a tag. So, the rule of thumb we use is if the style&#8230;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>is shorter to write inline<\/li>\n\n\n\n<li>never repeats anywhere else<\/li>\n\n\n\n<li>doesn&#8217;t impede the legibility of content or code around it<\/li>\n<\/ul>\n\n\n\n<p>&#8230; then it&#8217;s OK to indulge in a small amount of inline styling in your code.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Color_the_finishing_touch\"><\/span>Color: the finishing touch<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>Note the use of color to create an allusion to faded ink and aged paper as our final treatment!<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<ul class=\"wp-block-list\">\n<li>In the <code>body<\/code> CSS, we added the following. The <code>color<\/code> property applies to the text, while the <code>background-color<\/code> property applies to the &#8220;paper&#8221;:<\/li>\n<\/ul>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<pre class=\"wp-block-code\"><code>color: #1B191A;\nbackground-color: #C5BCB0;<\/code><\/pre>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<ul class=\"wp-block-list\">\n<li>The amazing secret recipe for the acidic paper border is a class <code>vignette<\/code> applied to the <code>container<\/code> tag:<\/li>\n<\/ul>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<pre class=\"wp-block-code\"><code>.vignette {\n   position: fixed;\n   top: 0;\n   left: 0;\n   width: 100%;\n   height: 100%;\n   box-shadow: 0 0 100px rgba(153, 119, 85, 1.0) inset;\n}\n\n.......\n\n&lt;container <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">class=\"vignette\"<\/mark>&gt;<\/code><\/pre>\n<\/div>\n<\/div>\n\n\n\n<iframe loading=\"lazy\" src=\"https:\/\/williamcromar.com\/code_samples\/marinetti-animate23\/step7_inline-css-and-colors\/marinetti.html\" style=\"border:1px #cccccc solid;\" name=\"myiFrame\" scrolling=\"no\" frameborder=\"1\" marginheight=\"0px\" marginwidth=\"0px\" height=\"600px\" width=\"100%\" allowfullscreen><\/iframe>\n\n\n\n<div class=\"wp-block-columns has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\" style=\"background-color:#ddddff\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100%\">\n<p><em><strong>YOUR TURN:<\/strong> Create a &#8220;T&#8221; div and style it to match the serif in the poem image, then create spans and inline styles to bring all text into close alignment with the poem image. It&#8217;s a wrap with the development of the aged paper and ink effect!<\/em><\/p>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Final_step_licensing_and_publishing\"><\/span>Final step: licensing and publishing<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<p>Well, almost a wrap! In the final step, we define a Creative Commons license and upload the finished work to the server using SFTP.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-center has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"background-color:#eeeeee;flex-basis:50%\">\n<p class=\"has-text-align-center\"><strong><em><a href=\"https:\/\/williamcromar.com\/code_samples\/marinetti-animate23\/marinetti.html\" target=\"_blank\" rel=\"noreferrer noopener\">Visit the Final Step &gt;<\/a><\/em><\/strong><\/p>\n<\/div>\n<\/div>\n\n\n\n<p>Take a look at the source code for the licensing statement commented near the top of the page. It acknowledges the origin of the poem and recognizes it now resides in the public domain. It also applies a Creative Commons license, which some of our free fonts require us to do.<\/p>\n\n\n\n<p>Once you&#8217;ve taken care of the legal bits, you can <a href=\"https:\/\/williamcromar.com\/newmediawiki\/sftp\/\"><strong>SFTP upload<\/strong><\/a> it to your server and enjoy the fruits of your labor live online!<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p><em>If you&#8217;re interested in learning more about the work of Marinetti and the history of his poem <strong>Dunes<\/strong>, visit the PDF excerpt of <a href=\"https:\/\/www.google.com\/url?sa=i&amp;url=https%3A%2F%2Fhunterartistbooks.files.wordpress.com%2F2011%2F02%2Fthe-visible-world-marinetti.pdf&amp;psig=AOvVaw1oOOvzY4KBPppCerP65vpF&amp;ust=1702297434824000&amp;source=images&amp;cd=vfe&amp;opi=89978449&amp;ved=0CBQQjhxqFwoTCJjjtqzuhIMDFQAAAAAdAAAAABAP\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Marinetti: Materiality and Sensation: Mechanical Synaesthesia<\/strong><\/a>.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>4D media 3 | concrete poetry marinettiCSS Visit the finished Marinetti site &gt; An act of artistic &#8220;forgery&#8221; Art is a lie that makes us realize the truth. \u2014Pablo Picasso One of the surest tests is the way in which a poet borrows. Immature poets imitate; mature poets steal; bad poets deface what they take,&#8230; <a href=\"https:\/\/williamcromar.com\/newmediawiki\/marinetticss\/\">read more &raquo;<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_eb_attr":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[5,11],"tags":[],"class_list":["post-4906","post","type-post","status-publish","format-standard","hentry","category-4d-media","category-exercises"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>marinettiCSS - newMediaWiki<\/title>\n<meta name=\"description\" content=\"Marinetti CSS: Create a &quot;forgery&quot; of the typography of Dunes, a famous concrete poem written by Italian Futurist poet F. T. Marinetti in 1914.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/williamcromar.com\/newmediawiki\/marinetticss\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"marinettiCSS - newMediaWiki\" \/>\n<meta property=\"og:description\" content=\"Marinetti CSS: Create a &quot;forgery&quot; of the typography of Dunes, a famous concrete poem written by Italian Futurist poet F. T. Marinetti in 1914.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/williamcromar.com\/newmediawiki\/marinetticss\/\" \/>\n<meta property=\"og:site_name\" content=\"newMediaWiki\" \/>\n<meta property=\"article:published_time\" content=\"2023-12-09T18:00:40+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-11T11:42:36+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/manraytrans.gif\" \/>\n<meta name=\"author\" content=\"williamCromar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"williamCromar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"22 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/marinetticss\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/marinetticss\\\/\"},\"author\":{\"name\":\"williamCromar\",\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/#\\\/schema\\\/person\\\/680114553d8ae86ba751ea5e0ea983e3\"},\"headline\":\"marinettiCSS\",\"datePublished\":\"2023-12-09T18:00:40+00:00\",\"dateModified\":\"2024-01-11T11:42:36+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/marinetticss\\\/\"},\"wordCount\":4684,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/#\\\/schema\\\/person\\\/680114553d8ae86ba751ea5e0ea983e3\"},\"image\":{\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/marinetticss\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/manraytrans.gif\",\"articleSection\":[\"4d media\",\"Exercises\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/marinetticss\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/marinetticss\\\/\",\"url\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/marinetticss\\\/\",\"name\":\"marinettiCSS - newMediaWiki\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/marinetticss\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/marinetticss\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/manraytrans.gif\",\"datePublished\":\"2023-12-09T18:00:40+00:00\",\"dateModified\":\"2024-01-11T11:42:36+00:00\",\"description\":\"Marinetti CSS: Create a \\\"forgery\\\" of the typography of Dunes, a famous concrete poem written by Italian Futurist poet F. T. Marinetti in 1914.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/marinetticss\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/marinetticss\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/marinetticss\\\/#primaryimage\",\"url\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/manraytrans.gif\",\"contentUrl\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/manraytrans.gif\",\"width\":420,\"height\":420},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/marinetticss\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"marinettiCSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/#website\",\"url\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/\",\"name\":\"newMediaWiki\",\"description\":\"because all media are new\",\"publisher\":{\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/#\\\/schema\\\/person\\\/680114553d8ae86ba751ea5e0ea983e3\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/#\\\/schema\\\/person\\\/680114553d8ae86ba751ea5e0ea983e3\",\"name\":\"williamCromar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/i0.wp.com\\\/williamcromar.com\\\/newmediawiki\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/2015_newmedia_logo.png?fit=1754%2C1754&ssl=1\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/williamcromar.com\\\/newmediawiki\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/2015_newmedia_logo.png?fit=1754%2C1754&ssl=1\",\"contentUrl\":\"https:\\\/\\\/i0.wp.com\\\/williamcromar.com\\\/newmediawiki\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/2015_newmedia_logo.png?fit=1754%2C1754&ssl=1\",\"width\":1754,\"height\":1754,\"caption\":\"williamCromar\"},\"logo\":{\"@id\":\"https:\\\/\\\/i0.wp.com\\\/williamcromar.com\\\/newmediawiki\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/2015_newmedia_logo.png?fit=1754%2C1754&ssl=1\"},\"url\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/author\\\/williamcromar\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"marinettiCSS - newMediaWiki","description":"Marinetti CSS: Create a \"forgery\" of the typography of Dunes, a famous concrete poem written by Italian Futurist poet F. T. Marinetti in 1914.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/williamcromar.com\/newmediawiki\/marinetticss\/","og_locale":"en_US","og_type":"article","og_title":"marinettiCSS - newMediaWiki","og_description":"Marinetti CSS: Create a \"forgery\" of the typography of Dunes, a famous concrete poem written by Italian Futurist poet F. T. Marinetti in 1914.","og_url":"https:\/\/williamcromar.com\/newmediawiki\/marinetticss\/","og_site_name":"newMediaWiki","article_published_time":"2023-12-09T18:00:40+00:00","article_modified_time":"2024-01-11T11:42:36+00:00","og_image":[{"url":"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/manraytrans.gif","type":"","width":"","height":""}],"author":"williamCromar","twitter_card":"summary_large_image","twitter_misc":{"Written by":"williamCromar","Est. reading time":"22 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/williamcromar.com\/newmediawiki\/marinetticss\/#article","isPartOf":{"@id":"https:\/\/williamcromar.com\/newmediawiki\/marinetticss\/"},"author":{"name":"williamCromar","@id":"https:\/\/williamcromar.com\/newmediawiki\/#\/schema\/person\/680114553d8ae86ba751ea5e0ea983e3"},"headline":"marinettiCSS","datePublished":"2023-12-09T18:00:40+00:00","dateModified":"2024-01-11T11:42:36+00:00","mainEntityOfPage":{"@id":"https:\/\/williamcromar.com\/newmediawiki\/marinetticss\/"},"wordCount":4684,"commentCount":0,"publisher":{"@id":"https:\/\/williamcromar.com\/newmediawiki\/#\/schema\/person\/680114553d8ae86ba751ea5e0ea983e3"},"image":{"@id":"https:\/\/williamcromar.com\/newmediawiki\/marinetticss\/#primaryimage"},"thumbnailUrl":"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/manraytrans.gif","articleSection":["4d media","Exercises"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/williamcromar.com\/newmediawiki\/marinetticss\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/williamcromar.com\/newmediawiki\/marinetticss\/","url":"https:\/\/williamcromar.com\/newmediawiki\/marinetticss\/","name":"marinettiCSS - newMediaWiki","isPartOf":{"@id":"https:\/\/williamcromar.com\/newmediawiki\/#website"},"primaryImageOfPage":{"@id":"https:\/\/williamcromar.com\/newmediawiki\/marinetticss\/#primaryimage"},"image":{"@id":"https:\/\/williamcromar.com\/newmediawiki\/marinetticss\/#primaryimage"},"thumbnailUrl":"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/manraytrans.gif","datePublished":"2023-12-09T18:00:40+00:00","dateModified":"2024-01-11T11:42:36+00:00","description":"Marinetti CSS: Create a \"forgery\" of the typography of Dunes, a famous concrete poem written by Italian Futurist poet F. T. Marinetti in 1914.","breadcrumb":{"@id":"https:\/\/williamcromar.com\/newmediawiki\/marinetticss\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/williamcromar.com\/newmediawiki\/marinetticss\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/williamcromar.com\/newmediawiki\/marinetticss\/#primaryimage","url":"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/manraytrans.gif","contentUrl":"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/manraytrans.gif","width":420,"height":420},{"@type":"BreadcrumbList","@id":"https:\/\/williamcromar.com\/newmediawiki\/marinetticss\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/williamcromar.com\/newmediawiki\/"},{"@type":"ListItem","position":2,"name":"marinettiCSS"}]},{"@type":"WebSite","@id":"https:\/\/williamcromar.com\/newmediawiki\/#website","url":"https:\/\/williamcromar.com\/newmediawiki\/","name":"newMediaWiki","description":"because all media are new","publisher":{"@id":"https:\/\/williamcromar.com\/newmediawiki\/#\/schema\/person\/680114553d8ae86ba751ea5e0ea983e3"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/williamcromar.com\/newmediawiki\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/williamcromar.com\/newmediawiki\/#\/schema\/person\/680114553d8ae86ba751ea5e0ea983e3","name":"williamCromar","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/i0.wp.com\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/2015_newmedia_logo.png?fit=1754%2C1754&ssl=1","url":"https:\/\/i0.wp.com\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/2015_newmedia_logo.png?fit=1754%2C1754&ssl=1","contentUrl":"https:\/\/i0.wp.com\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/2015_newmedia_logo.png?fit=1754%2C1754&ssl=1","width":1754,"height":1754,"caption":"williamCromar"},"logo":{"@id":"https:\/\/i0.wp.com\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/2015_newmedia_logo.png?fit=1754%2C1754&ssl=1"},"url":"https:\/\/williamcromar.com\/newmediawiki\/author\/williamcromar\/"}]}},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/williamcromar.com\/newmediawiki\/wp-json\/wp\/v2\/posts\/4906","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/williamcromar.com\/newmediawiki\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/williamcromar.com\/newmediawiki\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/williamcromar.com\/newmediawiki\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/williamcromar.com\/newmediawiki\/wp-json\/wp\/v2\/comments?post=4906"}],"version-history":[{"count":19,"href":"https:\/\/williamcromar.com\/newmediawiki\/wp-json\/wp\/v2\/posts\/4906\/revisions"}],"predecessor-version":[{"id":6012,"href":"https:\/\/williamcromar.com\/newmediawiki\/wp-json\/wp\/v2\/posts\/4906\/revisions\/6012"}],"wp:attachment":[{"href":"https:\/\/williamcromar.com\/newmediawiki\/wp-json\/wp\/v2\/media?parent=4906"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/williamcromar.com\/newmediawiki\/wp-json\/wp\/v2\/categories?post=4906"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/williamcromar.com\/newmediawiki\/wp-json\/wp\/v2\/tags?post=4906"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}