Mise en page à lettrine pour un recueil de poèmes de la nature
Dans un contexte de recueil de poèmes de montagne, mise en page avec lettrine : contenu réel, contrôles manipulables, retours d’état clairs et mise en page adaptable à toutes les tailles.
Après activation de JavaScript, ce cas peut être modifié, exécuté et enregistré. Code source fixe ci-dessous :
<!doctype html>
<html lang="fr" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Mise en page à lettrine pour un recueil de poèmes de la nature</title>
<style>
:root { --ink:#3a2419; --paper:#fbf3df; --accent:#c66a2d; --secondary:#b5c88d; --line:color-mix(in srgb, var(--ink) 18%, transparent); --shadow:0 24px 60px color-mix(in srgb, var(--ink) 16%, transparent); color-scheme:light; }
* { box-sizing:border-box; }
html { min-width:320px; background:var(--paper); }
body { min-height:100vh; margin:0; overflow-x:hidden; color:var(--ink); font-family:"DIN Alternate","Arial Narrow",sans-serif; background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--ink) 5%,transparent) 0 1px,transparent 1px 18px),var(--paper); }
button,input,select,textarea { color:inherit; font:inherit; }
button,[role="button"],input,select,textarea { accent-color:var(--accent); }
button { cursor:pointer; }
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
[hidden] { display:none !important; }
@media (max-width:700px) { .mast h1 { line-height:1.08 !important; letter-spacing:-.035em !important; overflow-wrap:anywhere; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } }
.mast{display:flex;justify-content:space-between;border-bottom:6px solid var(--ink);padding-bottom:18px;gap:20px;align-items:flex-end;margin:0 0 22px}.page{width:min(1240px,calc(100% - 28px));margin:auto;padding:34px 0 70px}.scenario{padding:8px 12px;border:2px solid var(--ink);font:900 12px/1 ui-monospace,monospace}.mast h1{font-family:"DIN Condensed","Arial Narrow",sans-serif;font-weight:900;text-transform:uppercase;font-size:clamp(44px,10vw,104px);letter-spacing:-.02em;max-width:1000px;margin:0;line-height:.82}.intro{max-width:720px;font-family:"Arial Narrow",sans-serif;line-height:1.5}.eyebrow{display:inline-block;padding:6px 9px;color:var(--paper);background:var(--accent);font:900 10px/1 ui-monospace,monospace;letter-spacing:.12em}.demo{border-radius:3px;box-shadow:10px 10px 0 var(--accent);position:relative;min-height:400px;overflow:hidden;padding:32px;background:var(--paper)}@media(max-width:700px){.mast{display:grid;grid-template-columns:1fr}.page{width:calc(100% - 16px);padding-top:16px}.demo{padding:14px}}
.panel{padding:24px;border-block:1px solid var(--ink);background:transparent}.stack{display:grid;gap:22px}.row{display:flex;flex-wrap:wrap;gap:16px}.action{padding:8px 0;border:0;border-bottom:1px solid currentColor;background:transparent;letter-spacing:.08em}.action.primary,.action.is-active{color:var(--accent);border-bottom-width:4px}.status{min-height:28px;margin-top:20px;font-style:italic}.metric{font-family:Didot,serif;font-size:clamp(38px,8vw,76px)}.muted{max-width:54ch;line-height:1.8}.meter{position:relative;height:3px;background:var(--line)}.meter>i{position:absolute;inset:0 auto 0 0;background:var(--accent)}.chip{padding-bottom:3px;border-bottom:1px solid var(--ink);font-size:13px}
.composition-split{display:grid;grid-template-columns:150px minmax(0,1fr);gap:18px;align-items:start}.split-note{position:sticky;top:20px;display:grid;gap:14px;padding:18px 12px;border-block:3px double var(--accent);font-size:13px;line-height:1.65}.split-note b{font:900 12px/1 ui-monospace,monospace;letter-spacing:.12em}.split-note span{writing-mode:vertical-rl;min-height:120px;color:color-mix(in srgb,var(--ink) 60%,transparent)}.composition-split .demo{min-width:0}@media(max-width:900px){.composition-split{grid-template-columns:1fr}.split-note{position:static;grid-template-columns:auto 1fr}.split-note span{writing-mode:horizontal-tb;min-height:0}}
.drop-cap-lab{display:grid;grid-template-columns:minmax(220px,.55fr) minmax(0,1.45fr);gap:18px}.drop-cap-controls{display:grid;align-content:start;gap:18px}.drop-cap-controls label{display:grid;grid-template-columns:1fr auto;gap:8px;font-weight:800}.drop-cap-controls input{grid-column:1/-1;width:100%}.drop-article{--drop-lines:4;min-height:410px;padding:clamp(28px,7vw,78px);border:1px solid var(--line);background:var(--paper)}.drop-article>span{color:var(--accent);font:800 11px/1 ui-monospace,monospace;letter-spacing:.2em}.drop-article h3{max-width:16ch;margin:.45em 0;font-size:clamp(34px,6vw,68px);line-height:1}.drop-article p{max-width:62ch;font-size:18px;line-height:1.85}.drop-article p:first-of-type::first-letter{float:left;margin:.06em .12em 0 0;font-size:calc(var(--drop-lines)*1em);font-weight:900;line-height:.72;color:var(--accent)}.drop-article.is-outline p:first-of-type::first-letter{color:transparent;-webkit-text-stroke:2px var(--accent)}@media(max-width:720px){.drop-cap-lab{grid-template-columns:1fr}.drop-article{min-height:0}.drop-article p{font-size:16px}}.workflow-dispatch{display:grid;grid-template-columns:minmax(210px,.48fr) minmax(0,1.52fr);gap:18px}.dispatch-console{display:grid;align-content:start;gap:16px;padding:22px;border:1px solid var(--line);border-radius:18px;background:color-mix(in srgb,var(--secondary) 12%,var(--paper))}.dispatch-console h2{margin:.2em 0}.dispatch-console form,.dispatch-console label{display:grid;gap:7px}.dispatch-console input,.dispatch-console select{min-width:0;width:100%;padding:10px;border:1px solid var(--line);border-radius:8px;background:var(--paper)}.dispatch-console fieldset{display:flex;gap:12px;border:1px solid var(--line);border-radius:10px}.dispatch-console fieldset label{display:flex;align-items:center}.dispatch-workbench{--dispatch-load:.22;min-width:0;padding:14px;border-left:8px solid color-mix(in srgb,var(--accent) calc(var(--dispatch-load)*100%),var(--line));background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 8%,transparent),transparent 28%)}.dispatch-workbench[data-dispatch-priority="urgent"]{box-shadow:inset 0 0 0 2px var(--accent)}@media(max-width:900px){.workflow-dispatch{grid-template-columns:1fr}.dispatch-console{order:2}}
</style>
</head>
<body data-aesthetic="industrial" data-composition="split-note">
<main class="page">
<header class="mast"><div><span class="eyebrow">industriel / mise en page avec lettrine / ADVANCED</span><h1>Mise en page à lettrine pour un recueil de poèmes de la nature</h1><p class="intro">Dans un contexte de recueil de poèmes de montagne, mise en page avec lettrine : contenu réel, contrôles manipulables, retours d’état clairs et mise en page adaptable à toutes les tailles.</p></div><span class="scenario">Recueil de poèmes de montagne</span></header>
<div class="composition-split"><aside class="split-note"><b>CASE 02</b><span>Maîtriser la structure sémantique d’une lettrine, la composition responsive, les interactions au clavier et la synchronisation des états.</span></aside><section class="demo" aria-label="Zone interactive de mise en page avec lettrine pour recueil de poèmes de montagne"><div class="workflow-dispatch"><aside class="dispatch-console"><span class="eyebrow">Recueil de poèmes de montagne DISPATCH</span><h2>Table de mise en ordre des manuscrits poétiques</h2><form id="workflowDispatchForm"><label>Type de tâche<select id="workflowDispatchKind"><option>Poème du sentier de montagne</option><option>Chapitre de la vallée</option><option>Nuit au gîte</option></select></label><label>Nombre de vers<input id="workflowDispatchAmount" type="number" min="1" max="9999" value="27"><span>ligne</span></label><fieldset><legend>Priorité de traitement</legend><label><input type="radio" name="workflowPriority" value="normal" checked>Standard</label><label><input type="radio" name="workflowPriority" value="urgent">Urgent</label></fieldset><button class="action primary" type="submit">Inclure dans un recueil</button></form><label>Tâche en cours<select id="workflowDispatchActive" aria-label="Basculer la tâche en cours"><option value="1">Poème du sentier de montagne</option><option value="2">Chapitre de la vallée</option></select></label><output id="workflowDispatchSummary">En attente de planification</output></aside><section id="workflowCore" class="workflow-core dispatch-workbench" data-dispatch-priority="normal"><!-- 11DZ_CORE_START:typography-text-drop-cap --><div class="drop-cap-lab"><aside class="drop-cap-controls panel"><span class="eyebrow">DROP CAP</span><h2>Lettrine</h2><label>nombre de lignes en retrait <input id="dropRows" type="range" min="2" max="6" value="4" data-core-bridge="typography-text-drop-cap"><output id="dropRowsValue">4 ligne</output></label><div class="row" role="group" aria-label="style de lettrine"><button class="action drop-style is-active" type="button" data-drop-style="solid" aria-pressed="true">Plein</button><button class="action drop-style" type="button" data-drop-style="outline" aria-pressed="false">Contour</button></div></aside><article id="dropArticle" class="drop-article"><span>Anthologie de poésie des montagnes · EDITORIAL</span><h3>Établir un rythme de lecture dès le premier caractère</h3><p>Le vent traverse le coin de la rue, apportant le son du papier et des feuilles. La lettrine transforme l’ouverture en point d’ancrage visuel, permettant au lecteur d’entrer naturellement dans l’histoire, sans rompre l’ordre sémantique du paragraphe lui-même.</p><p>Sur les écrans étroits, la mise en page resserre les marges, mais la première lettre conserve toujours un lien clair avec la ligne de base du corps du texte.</p></article></div><!-- 11DZ_CORE_END --></section></div><p id="status" class="status" role="status" aria-live="polite"></p></section></div>
</main>
<script>
'use strict';
const statusOutput = document.querySelector('#status');
const announce = message => { statusOutput.textContent = message; };
/* 11DZ_CORE_SCRIPT_START:typography-text-drop-cap */
const dropArticle=document.querySelector('#dropArticle');const dropRows=document.querySelector('#dropRows');function renderDropRows(){dropArticle.style.setProperty('--drop-lines',dropRows.value);document.querySelector('#dropRowsValue').textContent=dropRows.value+' ligne';announce('Lettrine '+dropRows.value+' ligne');}dropRows.addEventListener('input',renderDropRows);document.querySelectorAll('.drop-style').forEach(button=>button.addEventListener('click',()=>{const outline=button.dataset.dropStyle==='outline';dropArticle.classList.toggle('is-outline',outline);document.querySelectorAll('.drop-style').forEach(item=>{const selected=item===button;item.classList.toggle('is-active',selected);item.setAttribute('aria-pressed',String(selected));});announce('Utilisé'+button.textContent+'Lettrine');}));renderDropRows();
/* 11DZ_CORE_SCRIPT_END */
const workflowBridgeSpec={"name":"typography-text-drop-cap","selector":"[data-core-bridge=\"typography-text-drop-cap\"]","mode":"range","key":"ArrowRight"};const workflowBridgeCore=document.querySelector('#workflowCore');const workflowBridgeControl=workflowBridgeCore.querySelector(workflowBridgeSpec.selector);if(!workflowBridgeControl)throw new Error('Missing core bridge: '+workflowBridgeSpec.name);const workflowBridgeControlledId=workflowBridgeControl.getAttribute('aria-controls');const workflowBridgeControlled=workflowBridgeControlledId?document.getElementById(workflowBridgeControlledId):null;workflowBridgeCore.dataset.workflowBridge=workflowBridgeSpec.name;workflowBridgeCore.dataset.workflowVersion='0';function workflowBridgeSerialize(){const visualNode=workflowBridgeCore.firstElementChild||workflowBridgeCore;const visual=getComputedStyle(visualNode);const outputs=[...workflowBridgeCore.querySelectorAll('output,[role="status"],[aria-live],meter,progress')].map(node=>node.textContent.trim()+'|'+node.getAttribute('aria-valuenow')+'|'+node.getAttribute('value'));const canvas=[...workflowBridgeCore.querySelectorAll('canvas')].map(node=>{try{return node.toDataURL().slice(-160);}catch{return 'canvas-unavailable';}});return JSON.stringify({html:workflowBridgeCore.innerHTML,status:statusOutput.textContent,outputs,canvas,visual:[visual.display,visual.visibility,visual.opacity,visual.transform,visual.filter,visual.backgroundColor,visual.width,visual.height],scroll:workflowBridgeSpec.mode==='scroll'?workflowBridgeControl.scrollTop:null});}let workflowBridgeLastEffect=workflowBridgeSerialize();function workflowBridgeSummary(){const label=(workflowBridgeControl.getAttribute('aria-label')||workflowBridgeControl.textContent||workflowBridgeControl.value||workflowBridgeSpec.name).trim().replace(/\s+/g,' ').slice(0,72);return label+' · Version de base '+workflowBridgeCore.dataset.workflowVersion;}function workflowBridgeCommit(){const effect=workflowBridgeSerialize();if(effect===workflowBridgeLastEffect)return {changed:false,summary:workflowBridgeSummary()};workflowBridgeLastEffect=effect;workflowBridgeCore.dataset.workflowVersion=String(Number(workflowBridgeCore.dataset.workflowVersion||0)+1);return {changed:true,summary:workflowBridgeSummary()};}function workflowBridgeScheduleCommit(){queueMicrotask(workflowBridgeCommit);setTimeout(workflowBridgeCommit,0);}workflowBridgeControl.addEventListener("input",workflowBridgeScheduleCommit);workflowBridgeControl.addEventListener('change',workflowBridgeScheduleCommit);const workflowBridgeStateTargets=new Set(workflowBridgeCore.querySelectorAll('dialog'));if(workflowBridgeControlled&&workflowBridgeCore.contains(workflowBridgeControlled))workflowBridgeStateTargets.add(workflowBridgeControlled);workflowBridgeStateTargets.forEach(target=>['close','cancel','toggle'].forEach(eventName=>target.addEventListener(eventName,workflowBridgeScheduleCommit)));function workflowBridgeActivate(){workflowBridgeControl.focus();const step=Number(workflowBridgeControl.step)||1;const min=workflowBridgeControl.min===''?-Infinity:Number(workflowBridgeControl.min);const max=workflowBridgeControl.max===''?Infinity:Number(workflowBridgeControl.max);let next=Math.min(max,Math.max(min,(Number(workflowBridgeControl.value)||0)+step));if(next===Number(workflowBridgeControl.value))next=Math.max(min,Number(workflowBridgeControl.value)-step);workflowBridgeControl.value=String(next);workflowBridgeControl.dispatchEvent(new Event('input',{bubbles:true}));workflowBridgeControl.dispatchEvent(new Event('change',{bubbles:true}));const result=workflowBridgeCommit();setTimeout(workflowBridgeCommit,0);return result;}function workflowBridgeReset(){workflowBridgeCore.dataset.workflowVersion='0';workflowBridgeLastEffect=workflowBridgeSerialize();}
const workflowDispatchCore=document.querySelector('#workflowCore');const workflowDispatchForm=document.querySelector('#workflowDispatchForm');const workflowDispatchSelect=document.querySelector('#workflowDispatchActive');const workflowDispatchJobs=new Map([["1",{"label":"Poème du sentier de montagne","amount":12,"priority":"normal","touches":0}],["2",{"label":"Chapitre de la vallée","amount":21,"priority":"urgent","touches":0}]]);let workflowDispatchSerial=workflowDispatchJobs.size;function workflowDispatchDrive(job,activate=false){workflowDispatchCore.dataset.dispatchPriority=job.priority;workflowDispatchCore.style.setProperty('--dispatch-load',Math.min(.95,.16+job.amount/120));const bridge=activate?workflowBridgeActivate():{changed:false,summary:workflowBridgeSummary()};document.querySelector('#workflowDispatchSummary').textContent=job.label+' · '+job.amount+' Ligne · '+bridge.summary;announce('Tâche de composition du poème en cours :'+job.label);}function workflowDispatchRender(activeId,activate=false){workflowDispatchSelect.replaceChildren(...[...workflowDispatchJobs].map(([id,job])=>{const option=document.createElement('option');option.value=id;option.textContent=job.label+(job.priority==='urgent'?' · Urgent':'');return option;}));workflowDispatchSelect.value=activeId;workflowDispatchDrive(workflowDispatchJobs.get(activeId),activate);}workflowDispatchForm.addEventListener('submit',event=>{event.preventDefault();const data=new FormData(workflowDispatchForm);const id=String(++workflowDispatchSerial);workflowDispatchJobs.set(id,{label:document.querySelector('#workflowDispatchKind').value,amount:Math.max(1,Number(document.querySelector('#workflowDispatchAmount').value)||1),priority:data.get('workflowPriority'),touches:0});workflowDispatchRender(id,true);});workflowDispatchSelect.addEventListener('change',()=>workflowDispatchDrive(workflowDispatchJobs.get(workflowDispatchSelect.value),true));workflowDispatchCore.addEventListener('focusin',()=>{const job=workflowDispatchJobs.get(workflowDispatchSelect.value);if(!job)return;job.touches+=1;document.querySelector('#workflowDispatchSummary').textContent=job.label+' · '+job.amount+' Ligne · '+workflowBridgeSummary();});workflowDispatchRender('1',false);
workflowBridgeReset();
</script>
</body>
</html>