Estoy desarrollando un lector de libros para iOS usando unaUIWebView. En este momento estoy trabajando con algunos archivos HTML básicos, pero eventualmente trabajaré con ePubs. Estoy buscando una forma adecuada de diseñar rangos de texto. Mis rangos son un poco especiales, ya que generalmente abarcan tres rangos: un rango de teclas y un rango inmediatamente anterior y un rango inmediatamente posterior. El rango de teclas puede abarcar varios nodos y puede comenzar o finalizar, por ejemplo, dentro de una selección de texto en negrita, etc. El estilo no debe escribirse en el archivo.

En este momento tengo una solución de trabajo de la siguiente manera:

document.designMode = "on";

// Color the first section
var selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range1);

if (!selection.isCollapsed){ 
document.execCommand("foreColor", false, color1);    
}

// Color the middle section
selection.removeAllRanges();
selection.addRange(range2);

if (!selection.isCollapsed){   
document.execCommand("backColor", false, color2);
document.execCommand("foreColor", false, color3);
}

// Color the last section
selection.removeAllRanges();
selection.addRange(range3);

if (!selection.isCollapsed){ 
document.execCommand("foreColor", false, color1);
}

document.designMode = "off";
selection.removeAllRanges();

Esto funciona bien, pero es notablemente lento (en un iPad2), incluso si lo modifico para resaltar un rango único en un documento HTML corto. Siempre hay un retraso muy notable antes de que el texto se estilice. Mirando a los lectores de libros electrónicos en iPad, como kindle o iBooks, no hay demora perceptible. ¿Cómo podrían implementar su función de resaltado? ¿Podrían estar leyendo la ubicación geográfica en el texto seleccionado y aplicando algún tipo de superposición?

He buscado una solución mejor de la que ya estoy usando, pero sin suerte, así que si alguien tiene una idea, estaría muy agradecido.

¡Gracias