Diseño con inicial capitular del poemario de la montaña
En un contexto de poemario de montaña, completa un diseño con letra capitular inicial: incluye contenido real, controles interactivos, retroalimentación clara de estado y diseño adaptable a distintos tamaños.
Tras activar JavaScript, puedes editar, ejecutar y guardar este ejemplo. El código fuente fijado es el siguiente:
<!doctype html>
<html lang="es" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Diseño con inicial capitular del poemario de la montaña</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">industrial / composición tipográfica con capitular / ADVANCED</span><h1>Diseño con inicial capitular del poemario de la montaña</h1><p class="intro">En un contexto de poemario de montaña, completa un diseño con letra capitular inicial: incluye contenido real, controles interactivos, retroalimentación clara de estado y diseño adaptable a distintos tamaños.</p></div><span class="scenario">Poemario de montaña</span></header>
<div class="composition-split"><aside class="split-note"><b>CASE 02</b><span>Domina la estructura semántica, la composición adaptable, el manejo del teclado y la sincronización de estados de la primera letra destacada.</span></aside><section class="demo" aria-label="Zona interactiva del diseño de letra capitular para poemario de montaña"><div class="workflow-dispatch"><aside class="dispatch-console"><span class="eyebrow">Colección poética de montaña DISPATCH</span><h2>Despacho del manuscrito poético</h2><form id="workflowDispatchForm"><label>Tipo de tarea<select id="workflowDispatchKind"><option>Poema del sendero de montaña</option><option>Capítulo del valle</option><option>Noche de estancia</option></select></label><label>Número de versos<input id="workflowDispatchAmount" type="number" min="1" max="9999" value="27"><span>fila</span></label><fieldset><legend>Prioridad de procesamiento</legend><label><input type="radio" name="workflowPriority" value="normal" checked>Normal</label><label><input type="radio" name="workflowPriority" value="urgent">Urgente</label></fieldset><button class="action primary" type="submit">Incluir en la antología</button></form><label>Tarea actual<select id="workflowDispatchActive" aria-label="Cambiar tarea actual"><option value="1">Poema del sendero de montaña</option><option value="2">Capítulo del valle</option></select></label><output id="workflowDispatchSummary">A la espera de la programación</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>Diseño con capitular</h2><label>Número de líneas en sangría <input id="dropRows" type="range" min="2" max="6" value="4" data-core-bridge="typography-text-drop-cap"><output id="dropRowsValue">4 línea</output></label><div class="row" role="group" aria-label="inicial"><button class="action drop-style is-active" type="button" data-drop-style="solid" aria-pressed="true">Sólido</button><button class="action drop-style" type="button" data-drop-style="outline" aria-pressed="false">contorno</button></div></aside><article id="dropArticle" class="drop-article"><span>Antología de poesía de montaña · EDITORIAL</span><h3>Construye el ritmo de lectura desde la primera letra</h3><p>El viento pasa por la esquina de la calle y trae consigo el sonido del papel y de las hojas. La sangría inicial convierte el comienzo en un punto de anclaje visual, permitiendo que el lector entre de forma natural en la historia, sin alterar el orden semántico del párrafo.</p><p>En pantallas estrechas, el diseño reduce los márgenes, pero la letra inicial sigue manteniendo una relación clara con la línea base del texto principal.</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+' fila';announce('Inicial capitular '+dropRows.value+' fila');}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('Utilizado'+button.textContent+'Initial');}));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+' · versión principal '+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":"Poema del sendero de montaña","amount":12,"priority":"normal","touches":0}],["2",{"label":"Capítulo del valle","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+' línea · '+bridge.summary;announce('Tarea actual de la composición del poema:'+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'?' · Urgente':'');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+' línea · '+workflowBridgeSummary();});workflowDispatchRender('1',false);
workflowBridgeReset();
</script>
</body>
</html>