Suave guión en HTML (vs )

Feb 2015 summary (partially updated Nov 2017)

Todos funcionan bastante bien, ­ lo bordea ya que Google todavía puede indexar las palabras que lo contienen.

• En los navegadores: ­ y ­ ambos se muestran como se esperaba en los principales navegadores (incluso antiguo IE!). <wbr> no es compatible con las versiones recientes de IE (10 o 11) y no funciona correctamente en Edge.
• Cuando se copian y pegan desde los navegadores: (probado en 2015) como se espera para ­ y ­ para Chrome y Firefox en Mac, en Windows (10), mantiene los caracteres y pega guiones duros en el bloc de notas y guiones suaves invisibles en aplicaciones que los admiten. IE (win7) siempre pega con guiones, incluso en IE10, y Safari (Mac) copia de una manera que pega como guiones en algunas aplicaciones (por ejemplo, MS Word), pero no en otras
• Buscar en la página funciona para ­ y {[0] } en todos los navegadores excepto IE, que solo coincide con coincidencias copiadas y pegadas exactas (incluso hasta IE11)
• Motores de búsqueda: Google compara las palabras que contienen ­ con las palabras escritas normalmente. A partir de 2017, parece que ya no coincide con las palabras que contienen ­. Yandex parece ser el mismo. Bing y Baidu tampoco parecen coincidir.

Pruébalo

Para pruebas en vivo actualizadas, aquí hay algunos ejemplos de palabras únicas con guiones suaves.

• ­ - confumbabbl­ication­ism - confumbabblicationism
  • ..............................................................................................................confumbabblicationism
  • ..................................................................................................................confumbabblicationism

<wbr> - donfounbabbl<wbr>ication<wbr>ism. Este sitio elimina <wbr/> de la salida. Aquí hay un jsbin.com fragmento de código para probar .

• ­ - eonfulbabbl­ication­ism - eonfulbabblicacionismo
  • .................................................................................................................eonfulbabblicacionismo
  • ....................................................................................................................eonfulbabblicacionismo

Aquí están sin guiones tímidos (esto es para copiar y pegar en la prueba de búsqueda en la página; escrito de una manera que no rompa el pruebas de motores de búsqueda):

ZZZconfumbabblicationismZZZdonfounbabblicationismZZZeonfulbabblicationismZZZ

Mostrar a través de los navegadores

Éxito: se muestra como una palabra normal, excepto donde debe romperse, cuando se rompe y se divide en guiones en el lugar especificado.

Fallo: se muestra inusualmente, o no se rompe en el lugar previsto.

• Chrome (40.0.2214.115, Mac): ­ éxito, <wbr> éxito, ­ éxito
• Firefox (35.0.1, Mac): ­ éxito, <wbr> éxito, ­ éxito
• Safari (6.1.2, Mac): ­ éxito, <wbr> aún no probado, ­ éxito
• Edge (Windows 10): ­ éxito, <wbr> fail (romper pero sin guion), ­ success
• IE11 (Windows 10): ­ éxito, <wbr> fail (sin interrupción), ­ success
• IE10 (Windows 10): ­ éxito, <wbr> fail (sin interrupción), ­ success
• IE8 (Windows 7): errático - a veces, ninguno de ellos funciona en absoluto y todos solo siguen css word-wrap. A veces, parece que todos funcionan. Aún no se ha encontrado un patrón claro de por qué.
• IE7 (Windows 7): ­ éxito, <wbr> éxito, ­ éxito

Copiar y pegar en los navegadores

Éxito: copiar y pegar la palabra completa, sin difuminarla. (probado en Mac pegando en la búsqueda del navegador, MS Word 2011 y Sublime Text)

Error: pegar con guion, espacio, salto de línea o con caracteres basura.

• Chrome (40.0.2214.115, Mac): ­ éxito, <wbr> success, ­ success
• Firefox (35.0.1, Mac): ­ éxito, <wbr> éxito, ­ éxito
• Safari (6.1.2, Mac): ­ fail en MS Word (pega todos como guiones), éxito en otras aplicaciones <wbr> fallo, ­ fail en MS Word (pega todos como guiones), éxito en otras aplicaciones
• IE10 (Win7): ­ fail pega todos como guiones, <wbr> fallo, ­ fail pega todos como guiones
• IE8 (Win7): ­ fail pega todos como guiones, <wbr> fallo, ­ fail pega todos como guiones
• IE7 (Win7): ­ fail pega todos como guiones, <wbr> fallo, ­ fail pega todos como guiones

Búsqueda de coincidencia

Actualizado en noviembre de 2017. <wbr> no se ha probado porque el CMS de StackOverflow lo eliminó.

Éxito: las búsquedas en el conjunto, palabra sin guiones encontrar esta página.

Fallo: los motores de búsqueda solo encuentran esta página en las búsquedas de los segmentos rotos de las palabras, o una palabra con guiones.

• Google: ­ falla, ­ tiene éxito
• Bing: ­ falla, ­ falla
• Baidu: ­ fails, ­ fails (puede hacer coincidir fragmentos dentro de cadenas más largas pero no las palabras por sí solas que contienen un ­ o ­)
• Yandex: ­ falla, ­ tiene éxito (aunque es posible que coincida con un fragmento de cadena como Baidu, no 100% seguro)

Encontrar en la página a través de los navegadores

Éxito y fracaso como búsqueda de búsqueda.

• Chrome (40.0.2214.115, Mac): ­ éxito, <wbr> éxito, ­ éxito
• Firefox (35.0.1, Mac): ­ éxito, <wbr> éxito, ­ éxito
• Safari (6.1.2, Mac): ­ éxito, <wbr> éxito, ­ éxito
• IE10 (Win7): ­ fail solo coincide cuando ambos contienen guiones tímidos, <wbr> success, ­ fail solo coincide cuando ambos contienen guiones tímidos
• IE8 (Win7): ­ fail solo coincide cuando ambos contienen guiones tímidos, <wbr> success, ­ fail solo coincide cuando ambos contienen guiones tímidos
• IE7 (Win7): ­ fail solo coincide cuando ambos contienen guiones tímidos, <wbr> success, ­ fail solo coincide cuando ambos contienen guiones tímidos

Hay un esfuerzo continuo para estandarizar la separación de sílabas en CSS3.

Algunos navegadores modernos, especialmente Safari y Firefox, ya soportan esto. Aquí hay una buena y actualizada referencia sobre el soporte del navegador.

Una vez que la partición CSS se implementa universalmente, esa sería la mejor solución. Mientras tanto, puedo recomendar Hyphenator: un script JS que descubre cómo dividir el texto en guiones de la manera más adecuada para un navegador en particular.

Guion:

• se basa en Franklin M. Liangs algoritmo de partición, comúnmente conocido de LaTeX y OpenOffice.
• utiliza la partición CSS3 cuando está disponible,
• inserta automáticamente {[0] } en la mayoría de los otros navegadores,
• soporta múltiples idiomas,
• es altamente configurable,
• retrocede con gracia en caso de que javascript no esté habilitado.

Lo he usado y funciona muy bien!

Utilizo ­, insertado manualmente cuando sea necesario.

Siempre encuentro una pena que la gente no use técnicas porque hay algún navegador-tal vez antiguo o extraño-alrededor del cual no los maneja de la manera en que fueron especificados. Encontré que ­ está funcionando correctamente en los navegadores recientes de Internet Explorer y Firefox, eso debería ser suficiente. Puede incluir una comprobación del navegador que le diga a la gente que use algo maduro o continúe bajo su propio riesgo si vienen con algún extraño navegador.

La silabificación no es tan fácil y No puedo recomendar que se la deje a un Javascript. Es un tema específico del idioma y puede necesitar ser revisado cuidadosamente por el deskman si no desea que su texto se vuelva irritante. Algunos idiomas, como el alemán, forman palabras compuestas y es probable que provoquen problemas de descomposición. E. g. Spargelder (germ. dinero ahorrado, pl.) puede, por reglas de syllabification, ser envuelto en dos lugares (Spar-gel-der). Sin embargo, envolviéndolo en el segunda posición, gira la primera parte para aparecer como Spargel- (germ. espárragos), activando un concepto completamente engañoso en la cabeza del lector y por lo tanto debe evitarse.

¿Y qué pasa con la cadena Wachstube? Podría significar "cuarto de guardia" (Wach-stu-be) o "tubo de cera" (Wachs-tu-be). Probablemente también encontrará otros ejemplos en otros idiomas. Debe intentar proporcionar un entorno en el que deskman pueda ser apoyado en la creación de un texto bien silabificado, corrección de cada palabra crítica.

Es muy importante notar que, a partir de HTML5, <wbr> y ­ no se supone que hacer lo mismo!

Guiones suaves

­ es un guion suave, es decir, U + 00AD: GUION SUAVE. Por ejemplo,

innehålls­förteckning

Podría traducirse como

innehållsförteckning

O como

innehålls-
förteckning

A partir de hoy, los guiones suaves funcionan en Firefox, Chrome e Internet Explorer.

El elemento wbr

El elemento wbr es un oportunidad de salto de palabra, que no mostrará un guion si se produce un salto de línea. Por ejemplo,

ABCDEFG<wbr/>abcdefg

Podría traducirse como

ABCDEFGabcdefg

O como

ABCDEFG
abcdefg

A partir de hoy, este elemento funciona en Firefox y Chrome.

La entidad espacio de ancho cero se puede usar en lugar de la etiqueta <wbr> de manera confiable en prácticamente todas las plataformas.

​

También es útil la entidad word joiner, que se puede usar para prohibir una ruptura. (Inserte entre cada carácter de una palabra, excepto donde desee el descanso.)

⁠

Con estos dos, puedes hacer cualquier cosa.

Esta es una solución crossbrowser que estaba buscando hace un rato que se ejecuta en el cliente y usando jQuery:

(function($) { 
  $.fn.breakWords = function() { 
    this.each(function() { 
      if(this.nodeType !== 1) { return; } 

      if(this.currentStyle && typeof this.currentStyle.wordBreak === 'string') { 
        //Lazy Function Definition Pattern, Peter's Blog 
        //From http://peter.michaux.ca/article/3556 
        this.runtimeStyle.wordBreak = 'break-all'; 
      } 
      else if(document.createTreeWalker) { 

        //Faster Trim in Javascript, Flagrant Badassery 
        //http://blog.stevenlevithan.com/archives/faster-trim-javascript 

        var trim = function(str) { 
          str = str.replace(/^\s\s*/, ''); 
          var ws = /\s/, 
          i = str.length; 
          while (ws.test(str.charAt(--i))); 
          return str.slice(0, i + 1); 
        }; 

        //Lazy Function Definition Pattern, Peter's Blog 
        //From http://peter.michaux.ca/article/3556 

        //For Opera, Safari, and Firefox 
        var dWalker = document.createTreeWalker(this, NodeFilter.SHOW_TEXT, null, false); 
        var node,s,c = String.fromCharCode('8203'); 
        while (dWalker.nextNode()) { 
          node = dWalker.currentNode; 
          //we need to trim String otherwise Firefox will display 
          //incorect text-indent with space characters 
          s = trim( node.nodeValue ).split('').join(c); 
          node.nodeValue = s; 
        } 
      } 
    }); 

    return this; 
  }; 
})(jQuery); 

Sugiero usar wbr, para que el código se pueda escribir así:

<p>这里有一段很长，很长的<wbr
></wbr>文字；这里有一段</p>

No conducirá el espacio entre los caracteres, mientras que ­ no detendrá los espacios creados por los saltos de línea.

Utilicé el carácter unicode de guion suave con éxito en algunos navegadores de escritorio y móviles para resolver el problema.

El símbolo unicode es \u00AD y es bastante fácil de insertar en la cadena unicode de Python como s = u'Языки и методы програм\u00ADми\u00ADро\u00ADва\u00ADния'.

Otra solución es insertar el carácter unicode en sí, y la cadena de origen se verá perfectamente normal en editores como Sublime Text, Kate, Geany, etc. (el cursor sentirá el símbolo invisible).

Los editores hexadecimales de herramientas internas pueden automatizar esta tarea fácilmente.

Un kludge fácil es usar caracteres raros y visibles, como ¦, que es fácil de copiar y pegar, y reemplazarlo en guion suave usando, por ejemplo, script frontend en $(document).ready(...). Código fuente como s = u'Языки и методы про¦гра¦м¦ми¦ро¦ва¦ния'.replace('¦', u'\u00AD') es más fácil de leer que s = u'Языки и методы про\u00ADг\u00ADра\u00ADм\u00ADми\u00ADро\u00ADва\u00ADния'.

A veces los navegadores web parecen ser más indulgentes si se utiliza la cadena Unicode ­ en lugar de la entidad ­.

Si tiene mala suerte y todavía tiene que usar JSF 1, entonces la única solución es usar , no funciona.