Espaciado de frases

¿Cuál es la mejor manera de presentar el espacio adicional que debe venir entre oraciones (usando [X] HTML + CSS)?

Lorem ipsum. Dolor sit amet.

^^ wider than word spacing

Como tanto HTML como XML requieren el plegado de espacios en blanco, los dos espacios anteriores deben comportarse como un único espacio.

¿Qué opciones hay? Hay unos pocos obvios a continuación, ¿qué otros existen? (¿Hay algo en CSS3?) ¿Qué inconvenientes, si existen, existen para estos, incluso en diferentes navegadores? (¿Cómo interactúan los espacios sin interrupción a continuación con el ajuste de línea?)

  • ..ipsum.  Dolor..
  • ..ipsum.  Dolor..
  • ..ipsum.  Dolor..

Hay una gran cantidad de FUD en la red que afirma que fue inventado para máquinas de escribir, pero se puede ver en documentos como la Declaración de Independencia de los Estados Unidos . (Y sí, me doy cuenta de que no debes seguir todas las convenciones de hace más de doscientos años, DoI es simplemente un ejemplo útil que muestra estas máquinas de escribir y monoespaciado anteriores). O un tipógrafo que afirma que el espacio adicional es una distracción, después de cambiar ¡el color de fondo para que el ejemplo no pueda ser otra cosa!

Para decirlo sin rodeos, aunque aprecio las opiniones y la discusión sobre si se debe usar espaciado adicional o no (que no está relacionado con la progtwigción), eso no es lo que estoy pidiendo. Supongamos que es un requisito, ¿cuál es la mejor manera de implementarlo?

Envuelve cada oración en un lapso, y diseña el lapso quizás. (No es una gran solución).

Puede usar white-space: pre-wrap para conservar secuencias de espacios, mientras sigue envolviendo el texto:

 

Lorem ipsum. Dolor sit amet.

Esto no es compatible con IE hasta IE 8 en modo IE 8, ni en Firefox hasta 3.0.

También puedes usar o para espacios uno em o uno en ancho. No sé qué tan extendido es el soporte de estos, pero parecen funcionar en los últimos WebKit y Firefox en Mac OS X.

Una secuencia de dos   los personajes evitarán saltos de línea en ese espacio; eso es lo que   significa, espacio sin ruptura. La secuencia A sentence.  Another. A sentence.  Another. causa el   aparecer en la segunda línea, sangrando ligeramente el texto, lo que probablemente sea indeseable. La secuencia A sentence.  Another. A sentence.  Another. funciona bien, con salto de línea y sin agregar ninguna sangría adicional, aunque si lo usa en texto justificado, con el   al final de la línea, evitará que esa línea se justifique adecuadamente.   es para el caso de escribir el nombre de alguien, como Mr. Torvalds , o una abreviatura que termina en a . , en el que la convención tipográfica dice que no se debe dividir entre líneas para evitar que las personas se confundan y piensen que la oración ha terminado.

Entonces, usando secuencias de   es indeseable Dado que este es un efecto estilístico, recomendaría usar white-space: pre-wrap , y aceptar que el estilo será un poco menos que ideal en las plataformas que no lo admiten.

editar : Como se señala en los comentarios, white-space: pre-wrap no funciona con text-align: justify . Sin embargo, probé una muestra de diferentes entidades usando BrowserShots (avisos desagradables, y algo raro y lento, pero es un servicio bastante útil por el precio, que es gratis). Parece una amplia variedad de navegadores, en una amplia variedad de plataformas, soporte y , algunos que aún no usan espacios, por lo que el procesamiento no es tan malo, y solo IE 6 en Windows 2000 realmente los descompone, como cuadros. BrowserShots no me permite elegir los combos exactos de navegador / SO que deseo, así que no puedo elegir IE 6 en XP para ver si eso es diferente. Entonces, esa es una respuesta plausible siempre que puedas vivir con IE 6 en Win2K (y tal vez en XP) roto.

Otra posible solución sería encontrar (o crear) una fuente que tenga un par de interletraje para la combinación de caracteres “.”, Para separarlos más ampliamente. Con @font-face soporte de @font-face en todos los navegadores más importantes en este momento, incluyendo IE de vuelta a IE 5.5 (aunque IE usa un formato diferente al de los otros navegadores), usar tu propia fuente es realmente razonable y recurrir a los usuarios la fuente predeterminada si no es compatible no rompería nada.

Una última posibilidad podría ser convencer al comité de CSS de que agregue una característica de estilo que le permita especificar que desea un espaciado más amplio al final de las oraciones (que estaría determinado por un período seguido de un espacio; los acrónimos y las abreviaturas necesitarían una   para evitar obtener el espacio más amplio). Actualmente, el comité de CSS está discutiendo la posibilidad de agregar soporte de tipografía más avanzado, por lo que ahora podría ser un buen momento para comenzar a debatir sobre esta característica.

Solo quería decir que si su objective es anular la implementación predeterminada del espacio en blanco del navegador para proporcionar un espaciado de oraciones “adecuado”, en realidad hay cierto debate sobre lo que constituye el espaciado adecuado. Parece que el “estándar” de doble espacio probablemente sea solo un remanente de cuando las máquinas de escribir usaron fonts monoespaciales. Cita de dinero:

En resumen : los tipógrafos, diseñadores y editores de escritorio profesionales deben usar un solo espacio. Guarde los espacios dobles para escribir a máquina, correo electrónico, documentos de término (si lo prescribe la guía de estilo que está utilizando) o correspondencia personal. Para todos los demás, haz lo que te haga sentir bien.

A menos que tengas esto como un requisito estricto, no parece que valga la pena intentarlo y “arreglarlo”. (Me doy cuenta de que esto no es una respuesta a su pregunta declarada per se, pero quería asegurarme de que usted conoce esta información, ya que podría influir en su decisión de dedicarle mucho tiempo).

Para todos los detractores ‘anticuados’ y ‘monoespacios’: lee un libro. Los editores profesionales han usado un solo entre oraciones por tiempo inmemorial, y ES de donde vino el estándar de dos espacios monoespaciales. Aprender de la historia en lugar de lanzar retórica sin ninguna base, de hecho. Debo admitir, sin embargo, que an se ve mejor en la mayoría de los navegadores: es demasiado ancho ¿Qué piensas de la legibilidad de este párrafo? El editor de Stackoverflow permite algo de HTML, y estoy usando entre todas las oraciones.

  no es el personaje correcto para usar, semánticamente hablando. Es un espacio sin interrupciones: un espacio que no se usará como un salto de línea. Tal vez use un espacio un a o un solo , o (mi recomendación personal) no te molestes con el anticuado estilo de doble espacio en tu página.

& nbsp; es el peor método posible, ya que interrumpe la justificación. El preenrollado como se sugiere da un control aproximado pero no se puede justificar. Hay otras entidades espaciales como & thinspace; y & nspace ;, así como un grupo de caracteres de espacio Unicode que deberían dar un mejor control y no deberían romper la justificación. Estas entidades son la mejor solución que no es CSS, en mi opinión.

Para un mejor control necesita una solución CSS. Puede abarcar las oraciones, la elección obvia, o puede abarcar el espacio entre oraciones. Lo último para mí parece ser más incorrecto, pero es más fácil de lograr, especialmente si tiene el hábito común de escribir en dos espacios: simplemente puede buscar y reemplazar todo el espacio-tiempo-período con un lapso alrededor de un espacio. Tengo un javascript que hace esto sobre la marcha para blogger.

No use el modelo de caja (relleno a la derecha) ya que romperá el margen derecho del texto completamente justificado (e incluso si no se justifica por completo, hace que las líneas se envuelvan “temprano”). Si abarca el espacio entre oraciones, puede alterar el espaciado entre palabras en estos elementos. Si está ajustando oraciones, puede configurar su párrafo u otro contenedor para tener un espaciado de palabras más grande, y establecer las frases a la normalidad, o puede hacerlo en un solo paso con el selector posterior:

.your_sentence_class: after {content: “”; espaciado de palabras: 0.5em; }