javascript - extendidos - java acentos utf 8

Deshabilitar el subrayado para los caracteres en minúscula: gqpjy?

Question

¡A veces no quieres un subrayado cortando ciegamente un título de página subrayado!
¿Hay una manera de deshabilitar automáticamente el subrayado de ciertos caracteres en minúsculas? En estos casos, es mejor no subrayar estas letras minúsculas como {g,q,p,j, y}

CSS: h1{ text-decoration: underline; } h1{ text-decoration: underline; }
PAGE TITLE: George quietely jumped! PAGE TITLE: George quietely jumped!

A ) ¿Hay alguna forma de lograr una regla de estilo tan delicada y avanzada?
B ) ¿Qué otros caracteres latinos queremos subrayar?
C ) ¿Cómo establecer el grosor / delgadez del subrayado?

Answer 1

Aquí está mi solución:

Violín de trabajo

CSS :

h1, h2 {
  background-image: linear-gradient(to top, transparent 0px, transparent .15em, red .15em, red calc(.15em + 1px), transparent calc(.15em + 1px), transparent 100%);
  text-shadow: 0px -2px 3px white, 0px -2px 3px white, 0px -2px 3px white, 0px -2px 3px white, 0px -2px 3px white, 0px -2px 3px white;
}

Answer 2

Esta solución utiliza jQuery para envolver automáticamente las letras para subrayar en una etiqueta <span> .

DEMO

Como padres con text-decoration:underline "anular" a los niños con text-decoration:none; (ver here ). La técnica consiste en envolver solo las letras seleccionadas (las que se deben subrayar) con un <span class="underline"> y aplicar text-decoration:underline; a esa clase

Salida:

Señales que no estarán subrayadas:

g  j  p  q  y  Q  @  {  _  (  )  [  |  ]  }  ;  ,  §  µ  ç  /

HTML:

<h1 class="title">George quietely jumped!</h1>

CSS:

.underline {
    text-decoration:underline;
}

jQuery:

$(''.title'').each(function () {
    var s = ''<span class="underline">'',
        decoded;
    $(this).prop(''innerHTML'', function (_, html) {
        s += html.replace(/&amp;/g, ''&'').replace(/(g|j|p|q|y|Q|@|{|_|/(|/)|/[|/||/]|}|;|,|§|µ|ç|//)/g, ''</span>$1<span class="underline">'');
        s += ''</span>''
        $(this).html(s);
    });
});

Answer 3

Módulo de decoración de texto El nivel 3 introduce text-decoration-skip

Esta propiedad especifica qué partes del contenido del elemento debe omitirse cualquier decoración de texto que afecte al elemento.

Puede lograr el comportamiento que desee configurándolo en ink :

Omita los lugares donde se dibujan los glifos: interrumpa la línea de decoración para que la forma del texto se muestre a través de donde la decoración del texto se cruzaría sobre un glifo. La UA debe saltarse una pequeña distancia a cada lado del contorno del glifo.

h1 {
  text-decoration: underline;
  text-decoration-skip: ink;
}

<h1>George quietely jumped!</h1>

Tenga en cuenta que los principales navegadores no lo admiten todavía.

Answer 4

Sería un dolor en el culo, pero yo haría una clase "subrayada" y luego iría y lo haría manualmente

HTML

<h1><span class="underline">Ver</span>g<span class="underline">eten Kanalen</span></h1>

CSS

.underline{text-decoration:underline;}

Answer 5

Si conoce el color de fondo (suponiendo que es blanco, en este caso), pruebe esto:

h1 {
    line-height: 0.9em;
    border-bottom: 1px solid black;
    text-shadow: 2px 2px #fff, -2px 2px #fff;
}

la idea:

1. use el borde inferior y reduzca la altura de la línea para jalar la parte inferior del modelo de la caja h1 hacia arriba.
2. aplique dos sombras de texto no borrosas que se representarán detrás de su texto y sobre el borde inferior. (El primero, en este ejemplo, es 2px hacia abajo y hacia la izquierda; el segundo es 2px hacia abajo y hacia la derecha).

fiddle: http://jsfiddle.net/pmn4/a5LZE/

fyi - los navegadores no juegan bien con text-shadow; ¡Utilízalo de forma conservadora!

Answer 6

También puede falsificar el subrayado con un borde inferior. esto puede funcionar para líneas individuales y si las propiedades de visualización permiten que el elemento se reduzca en el contenido. (solo evita el bloque).

Aquí hay un ejemplo con una display:table para permitir el centro del texto y la línea de ruptura antes y después: http://codepen.io/gc-nomade/pen/vJoKB/ ¿Cuál es la idea?

1. si se establece una altura de línea más pequeña que el tamaño de fuente, el texto se desbordará de su contenedor.
2. dibujar un borde inferior para subrayar el texto
3. SVG ofrece un stroke , en CSS, podemos hacer algo similar al aumentar text-shadow con el mismo color que el fondo.
4. http://codepen.io/gc-nomade/pen/vJoKB/ , incluso puede establecer un color diferente al subrayado de simili y agregar una sombra que caiga.

En el navegador anterior, perderá la opción de box-shadow , pero aún puede usar los estilos de border double , groove o de border con un color diferente al del texto.

Gracias a @PatNewell por compartir este mismo enlace: medium.com/designing-medium/7c03a9274f9