html - tabla - Cómo aplicar bordes redondeados para resaltar/selección

sombra texto css

Question

He usado Visual Studio Online por un tiempo para un proyecto, y la forma en que aplican los bordes redondeados a las selecciones en su visor de código en línea es muy interesante:

He intentado inspeccionar el elemento y buscar algún tipo de CSS personalizado, pero no tuve suerte.

Tengo la sensación de que esto requiere algunos "trucos" complejos para que funcione, pero parece muy interesante, ya que nunca lo había visto antes.

¿Cómo pueden aplicar bordes redondeados a una selección?

Nota: la selección normal está completamente oculta MIENTRAS la selección, y la selección redondeada sigue el cursor como una selección normal. No DESPUÉS DE haber seleccionado algo.

Edición: he creado un tenedor de la respuesta de @ Coma que debería funcionar en Firefox y seleccionar con el mouse si se mueve usando:

$(document).on(''mousemove'', function () {

(Las fronteras en ciertos casos todavía podrían usar el trabajo.)

Answer 1

CSS '' ::selection solo admite la declaración de color, fondo, cursor y contorno ( ver W3C ). Por lo tanto, no hay posibilidad de definir border-radius para la selección con CSS puro.

Así que creo que lo hicieron como Niklas menciona en los comentarios:

1. Espere hasta que el usuario seleccione algo (inicio selecto, combinación de mousedown y mouseup)
2. Obtener el texto seleccionado
3. Obtenga la posición del texto seleccionado (número de caracteres desde el principio) ya que si solo hace doble clic en una sola palabra, no puede crear una regla a partir de ella.
4. Envuelve la selección con un div o span
5. Aplicar estilos a la envoltura.
6. Escuche si el usuario hace clic en otra cosa, etc. (anula la selección del texto) -> eliminar envoltorio

Comencé a intentar crear una solución, pero perdí mi motivación ya que me tomó mucho tiempo. Tal vez alguien pueda necesitar mis sugerencias (usé jQuery):

Para el punto 2:

var selection = (window.getSelection() // > IE 9 
                 || document.selection.createRange() //< IE 9
                ).toString();

Para el punto 4 utilice reemplazar ()

Para el punto 6:

$(".selection").replaceWith($(".selection")[0].childNodes);

Fiddle

Answer 2

En realidad, están usando rectángulos de bordes redondos para cubrir el final de los resaltados en oraciones que son más pequeñas que las líneas anteriores o posteriores (tal como dije en el punto 2). Mira esto por ti mismo:

1. No puedes inspeccionar el elemento directamente desde el iframe. Así que haz clic en otro lugar y navega hasta el iframe. Lo hice utilizando los cromos integrados en el inspector de código fuente.
2. Luego use esta imagen para averiguar la posición de la línea resaltada en la imagen.
3. Ese <div> contiene todos los puntos destacados de "selección". Simplemente colocan rectángulos redondeados, de color de fondo, debajo del texto, con absoluta, superior e izquierda. **
4. El siguiente <div> contiene <div> color de fondo similares, solo que son para resaltar palabras enfocadas, palabras similares, etc.

Este es en realidad el contenido del iframe. ¿Ves el #document en la parte superior?

Ver la vista ampliada. El pequeño espacio arriba que tiene el código es en realidad la sección resaltada.

Sin embargo, esta no es una muy buena idea para un sitio web simple. Realmente necesitaban analizar y rellenar las palabras y las letras, ya que se supone que es un editor de código de alto nivel, por lo que no puedo culparlos por dedicar un poco de tiempo para redondear los bordes un poco.

Answer 3

Les puedo asegurar que esto no tiene nada que ver con html, radio de borde css o resaltado. ¿La prueba?

1. La selección completa aparece como un bloque único con múltiples bordes y veritos y no es simétrica. No hay forma de tener formas de bordes múltiples directamente en html, sin usar SVG o Canvas. (bueno, esa es una posibilidad abierta para discusión)
2. Si no es un solo bloque, pero sí varias líneas resaltadas o marcadas con algún tipo de HTML o CSS o JS, entonces no puede haber una curva orientada hacia afuera como esta:
   
   (siempre hay posibilidades. Por ejemplo, podría cubrir la selección usando un rectángulo blanco con un radio de borde, pero esto parece ser altamente ineficiente e improbable ... Entonces ...)

En resumen, deben usar la propiedad Canvas y la gran cantidad de códigos para "subyacer" un procedimiento de selección interactivo. Existen numerosos tipos diferentes de resaltado que aparecen en el editor, como ''resaltado de la misma palabra'', ''resaltado seleccionado'', ''resaltado fuera de foco'', etc ... Para que todo esto suceda de manera eficiente, no puedo encontrar una mejor alternativa que el lienzo.

No te enojes conmigo por publicar esto. Pero no quería ver mis 4 horas de investigación como un desperdicio. Al menos tengo una observación y eso es todo.

ACTUALIZACIÓN:

Aunque pensé que cubrir la selección usando un rectángulo blanco con un radio de borde al final, es una forma bastante ineficiente e innecesaria. Microsoft no lo cree.

Están utilizando los rectángulos con bordes curvos para cubrir el final de los resaltes para dar ese efecto. Están utilizando <div> s de posición redondeada y de posición absoluta para dar el efecto de resaltar. Y al final de ese <div> , superponen una imagen de un rectángulo redondeado.

Y felicitaciones a ellos, han hecho un gran trabajo con él.

Answer 4

No es perfecto pero está funcionando:

http://jsfiddle.net/coma/9p2CT/

Eliminar la selección real.

::selection {
   background-color: transparent;
}

Añadir algunos estilos

span.highlight {
    background: #ADD6FF;
}

span.begin {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

span.end {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

pre.merge-end > span:last-child {
    border-bottom-right-radius: 0;
}

pre.merge-end + pre > span:last-child {
    border-top-right-radius: 0;
}

pre.merge-begin > span:first-child {
    border-bottom-left-radius: 0;
}

pre.merge-begin + pre > span:first-child {
    border-top-left-radius: 0;
}

Envuelve todos los caracteres en un elemento de nodo

var format = function () {

    var before = -1;
    var html = $.trim(editor.text())
    .split("/n")
    .reverse()
    .map(function (line) {

        var a = line.length === before ? ''merge-end'' : '''';
        before = line.length;

        return ''<pre class="'' + a + ''"><span>'' + line.split('''').join(''</span><span>'') + ''</span></pre>'';
    })
    .reverse()
    .join('''');

    editor.html(html);
};

Consigue los nodos seleccionados y resáltalos, cuida a sus padres.

var getSelectedNodes = function () {

    var i;
    var nodes = [];
    var selection = rangy.getSelection();

    for (i = 0; i < selection.rangeCount; ++i) {

        selection
        .getRangeAt(i)
        .getNodes()
        .forEach(function (node) {

            if ($(node).is(''span'')) {

                nodes.push(node);
            }
        });
    }

    return nodes;
};

var highlight = function (nodes, beforeNode) {

    var currentNode = $(nodes.shift()).addClass(''highlight'');
    var currentParent = currentNode.parent();

    if (beforeNode) {

        var beforeParent = beforeNode.parent();

        if (currentParent.get(0) !== beforeParent.get(0)) {

            currentNode.addClass(''begin'');
            beforeNode.addClass(''end'');
            beforeParent.addClass(''merge-begin'');
        }

    } else {

        currentNode.addClass(''begin'');
    }

    if (nodes.length) {

        highlight(nodes, currentNode);

    } else {

        currentNode.addClass(''end'');
    }
};

format();

$(document).on(''mouseup'', function () {

    $(''.highlight'').removeClass(''highlight begin end'');
    highlight(getSelectedNodes());
});

Gracias a Tim Down por Rangy !