Es muy común ver el HTML incorrecto utilizado para las comillas en el marcado. En este artículo, profundicemos en todo esto, analizando diferentes situaciones y diferentes etiquetas HTML para manejar esas situaciones.
Hay tres elementos HTML principales involucrados en las citas:
<blockquote><q><cite>
Vamos a ver.
Blockquotes
Las etiquetas de cita en bloque se utilizan para distinguir el texto entre comillas del resto del contenido. Mi maestra de inglés de décimo grado me inculcó en la cabeza que cualquier cita de cuatro líneas o más debería separarse de esta manera. La especificación HTML no tiene tal requisito, pero siempre que el texto sea una cita y desee que se separe del texto y las etiquetas circundantes, una cita en bloque es la opción semántica.
De forma predeterminada, los navegadores sangran las citas en bloque agregando un margen en cada lado.
Ver la pluma
La etiqueta Blockquote por Undead Institute (@undeadinstitute)
en CodePen.
Como elemento de flujo (es decir, elemento de “nivel de bloque”), blockquote puede contener otros elementos en su interior. Por ejemplo, podemos colocar párrafos allí sin problema:
<blockquote>
<p></p>
<p></p>
</blockquote>Pero también podrían ser otros elementos, como un encabezado o una lista desordenada:
<blockquote>
<h2></h2>
<ul>
<li></li>
<li></li>
</ul>
</blockquote>Es importante tener en cuenta que las citas en bloque solo deben usarse para citas en lugar de como un elemento decorativo en un diseño. Esto también ayuda a la accesibilidad, ya que los usuarios de lectores de pantalla pueden saltar entre citas en bloque. Por lo tanto, un elemento de cita en bloque utilizado únicamente por motivos de estética podría realmente confundir a esos usuarios. Si necesita algo más decorativo que se salga de los límites de las citas extendidas, entonces tal vez un div con una clase sea el camino a seguir.
blockquote,
.callout-block {
/* These could share styling */
}Citando con Q
Etiquetas Q (<q>) son para citas en línea, o lo que mi maestro de décimo grado diría son las de menos de cuatro líneas. Muchos navegadores modernos agregarán automáticamente comillas a la cita como pseudo elementos, pero es posible que necesite una solución de respaldo para navegadores más antiguos.
Ver la pluma
La etiqueta Q de Programar Plus(@ css-tricks)
en CodePen.
Las comillas típicas son tan válidas para las comillas en línea como las <q> elemento. Los beneficios de usar <q>, sin embargo, incluye un atributo de cita, manejo automático de comillas y manejo automático de niveles de cotización. <q> elementos no deben usarse para el sarcasmo (por ejemplo, “usarías un <q> etiqueta para sarcasmo, ¿no? ”), o significando una palabra con comillas (por ejemplo,“ impresionante ”es una descripción“ precisa ”del autor). Pero si puede averiguar cómo marcar las cotizaciones aéreas, hágamelo saber. Porque eso sería genial.”
El atributo de cita
Ambos <q> y blockquotes pueden usar una cita (cite) atributo. Este atributo contiene una URL que proporciona contexto y / o una referencia para el material citado. La especificación hace hincapié en decir que la URL puede estar rodeada de espacios. (No estoy seguro de por qué se señala eso, pero si quieres enojar a las deidades del código semántico, tendrás que hacer más que tirar espacios).
<p>The officer left a note saying <q cite="https://johnrhea.com/summons">You have been summoned to appear on the 4th day of January on charges of attempted reader bribery.</q></p>Ese cite El atributo no es visible para el usuario de forma predeterminada. Puede agregarlo con una pizca de magia CSS como la siguiente demostración. Incluso podría jugar más con él para que la cita aparezca al pasar el mouse.
Ver la pluma
Citas atribuibles por Programar Plus(@ css-tricks)
en CodePen.
Ninguna de esas opciones es particularmente buena. Si necesita citar una fuente de manera que los usuarios puedan verla y acceder a ella, debe hacerlo en HTML y probablemente con la <cite> elemento, que cubriremos a continuación.
El elemento de la cita
El <cite> La etiqueta debe usarse para hacer referencia al trabajo creativo en lugar de a la persona que dijo o escribió la cita. En otras palabras, no es para citas. Aquí están los ejemplos de la especificación:
<p>My favorite book is <cite>The Reality Dysfunction</cite> by
Peter F. Hamilton. My favorite comic is <cite>Pearls Before
Swine</cite> by Stephan Pastis. My favorite track is <cite>Jive
Samba</cite> by the Cannonball Adderley Sextet.</p>Aquí hay otro ejemplo:
Ver la pluma
¡Cite esto! por Programar Plus(@ css-tricks)
en CodePen.
Si el autor de este artículo te dijera que te regalaría un pastelito y tú <cite> él por su nombre, eso sería semánticamente incorrecto. Por lo tanto, ningún pastelito cambiaría de manos. Si citaras el artículo en el que te ofrece un cupcake, eso sería semánticamente correcto, pero como el autor no haría eso, tampoco obtendrías un cupcake. Lo siento.
De forma predeterminada, los navegadores ponen en cursiva las etiquetas de cita y no es necesario que <q> o <blockquote> estar presente para usar el elemento cite. Si desea citar un libro u otro trabajo creativo, anótelo en el elemento citar. Las deidades semánticas te sonreirán por no usar <i> o <em> elementos.
Pero, ¿dónde poner el elemento cite? ¿Dentro? ¿Fuera de? ¿El al revés? Si lo ponemos dentro del <blockquote> o la <q>, lo estamos haciendo parte de la cotización. Eso está prohibido por la especificación solo por esa razón.
<!-- This is apparently wrong -->
<blockquote>
Quote about cupcake distribution from an article
<cite>The Article</cite>
</blockquote>Ponerlo afuera simplemente se siente mal y también requiere que tenga un elemento envolvente como un <div> si quisieras peinarlos juntos.
<div class="need-to-style-together">
<blockquote>
Quote about cupcake distribution from an article
</blockquote>
<cite>The Article</cite>
</div>NB Si busca en Google este número, es posible que se encuentre con un artículo de HTML5 Doctor de 2013 que contradice gran parte de lo que se describe aquí. Dicho esto, cada vez que se vincula a los documentos para obtener soporte, los documentos están de acuerdo con el artículo que está leyendo actualmente en lugar del artículo de HTML5 Doctor. Lo más probable es que los documentos hayan cambiado desde que se escribió ese artículo.
Oye, ¿qué pasa con el elemento figura?
Una forma de marcar una cita, y de una manera que agrade a las deidades del código semántico, es poner la cita en bloque dentro de un elemento de figura. Luego, coloque el elemento cite y cualquier otro autor o información de cita en una figura.
<figure class="quote">
<blockquote>
But web browsers aren’t like web servers. If your back-end code is getting so big that it’s starting to run noticably slowly, you can throw more computing power at it by scaling up your server. That’s not an option on the front-end where you don’t really have one run-time environment—your end users have their own run-time environment with its own constraints around computing power and network connectivity.
</blockquote>
<figcaption>
— Jeremy Keith, <cite>Mental models</cite>
</figcaption>
</figure>Si bien esto duplica la cantidad de elementos necesarios, existen varios beneficios:
- Es semánticamente correcto para los cuatro elementos.
- Le permite incluir y encapsular la información del autor más allá de citar el nombre del trabajo.
- Le brinda una manera fácil de diseñar la cita sin recurrir a divs, spans o miseria.
Ver la pluma
Imagina que dirías eso por Programar Plus(@ css-tricks)
en CodePen.
Nada de esto es para dialogar
No <dialog>! Son para modales que llaman la atención. Diálogo, como en intercambios conversacionales entre personas que hablan o escriben entre sí.
Ninguno de los dos <blockquote> ni <q> ni <cite> se utilizarán para el diálogo y los intercambios similares entre hablantes. Si está marcando un diálogo, puede usar lo que tenga más sentido para usted. No hay forma semántica de hacerlo. Dicho esto, la especificación sugiere <p> etiquetas y puntuación con <span> o <b> etiquetas para designar al hablante y <i> etiquetas para marcar las direcciones del escenario.
Accesibilidad de cotizaciones
Según la investigación que he realizado, los lectores de pantalla no deberían tener ningún problema para comprender <q>, <blockquote>, o <cite> etiquetas
Más “formas” de “citar”
Puede agregar comillas a un <blockquote> utilizando pseudo elementos CSS. El <q> El elemento viene con comillas incorporadas, por lo que no es necesario agregarlos, sin embargo, agregarlos como pseudoelementos puede ser una solución para los navegadores más antiguos que no los agregan automáticamente. Dado que así es como los navegadores modernos agregan las comillas, no hay peligro de agregar comillas duplicadas. Los nuevos navegadores sobrescribirán los pseudo elementos predeterminados, y los navegadores más antiguos que admiten pseudo elementos agregarán las comillas.
Pero no puede, como hice yo, asumir que lo anterior siempre le dará citas de apertura y cierre inteligentes. Incluso si la fuente admite comillas tipográficas, a veces se mostrarán comillas rectas. Para estar seguro, es mejor usar la propiedad CSS de las comillas para aumentar la inteligencia de esas comillas.
blockquote {
quotes: "“" "”" "‘" "’";
}Ver la pluma
“Cotizar” la cita en bloque por Programar Plus(@ css-tricks)
en CodePen.
Cotización de varios niveles
Ahora veamos los niveles de cotización. El <q> La etiqueta ajustará automáticamente los niveles de cotización.
Digamos que estás en un área que usa la convención británica de usar comillas simples. Puede usar la regla de comillas CSS para poner las comillas simples de apertura y cierre primero en la lista. Aquí hay un ejemplo de ambas formas:
Ver la pluma
Cita dentro de una cita por Programar Plus(@ css-tricks)
en CodePen.
No hay límite para anidar. Los anidados <q> los elementos podrían incluso estar dentro de una cita en bloque que está dentro de una cita en bloque.
Si agrega comillas a una cita en bloque, sepa que la cita en bloque no cambia el nivel de la cita de la forma en que <q> la etiqueta lo hace. Si espera tener comillas dentro de una cita en bloque, es posible que desee agregar una regla de selección descendiente para comenzar <q> elementos dentro de una cita en bloque en el nivel de comillas simples (o comillas dobles si sigue las convenciones británicas).
blockquote q {
quotes: "‘" "’" "“" "”";
}El último nivel de cotización que ingresó continuará a través de los niveles posteriores de cotización. Para usar la convención doble, simple, doble, simple …, agregue más niveles a la propiedad de comillas CSS.
q {
quotes: "“" "”" "‘" "’" "“" "”" "‘" "’" "“" "”";
}Puntuación colgante
Muchos expertos en tipografía le dirán que colgar las comillas en las citas en bloque se ve mejor (y tienen razón). La puntuación colgante son, en este caso, comillas que se eliminan del texto para que los caracteres del texto se alineen verticalmente.
Una posibilidad en CSS es usar un valor ligeramente negativo en el text-indent propiedad. La sangría negativa exacta variará según la fuente, así que asegúrese de verificar el espaciado con la fuente que termine usando.
blockquote {
text-indent: -0.45em;
}Hay una forma más agradable de manejar esto usando el hanging-punctuation Propiedad CSS. Solo es compatible con Safari en el momento de escribir este artículo, por lo que tendremos que mejorar progresivamente:
/* Fallback */
blockquote {
text-indent: -0.45em;
}
/* If there's support, erase the indent and use the property instead */
@supports ( hanging-punctuation: first) {
blockquote {
text-indent: 0;
hanging-punctuation: first;
}
}Utilizando hanging-punctuation es mejor porque es menos complicado. Simplemente funcionará cuando pueda.
Ver la pluma
Colgar tu puntuación mediante Programar Plus(@ css-tricks)
en CodePen.
¿Podemos animar las comillas?
Por supuesto que podemos.
Ver la pluma
Citas de baile por Programar Plus(@ css-tricks)
en CodePen.
Por qué necesitarías hacer esto, no estoy totalmente seguro, pero las comillas en un <q> Las etiquetas se agregan son pseudo elementos en la hoja de estilo UA, por lo que podemos seleccionarlos y aplicarles estilo, incluida la animación, si es necesario.
Espera, quizás acabamos de resolver el asunto de las comillas aéreas después de todo.