0

Hola el problema es que tengo un span con la propiedad contentEditable="true" para que el usuario pueda escribir en el, pero este se agrega desde javascript. y me gustaría omitirlo al momento de que el navegador traduzca la pagina.

Trate lo siguiente pero no me funciona

index.html

    <!DOCTYPE html>
<html lang="en-US">
<head>
    <title>HOla Mundo</title>
</head>
<body>

    <script src="index.js"></script>
</body>
<style type="text/css">
    body{
    display: flex;
    justify-content: space-around;
    align-items: center;
    background: white;
}
span{
    background: #333770;
    width: 50%;
    height: 200px;
    color: white;
    font-size: 40px;
}
</style>
</html>

index.js

let span = document.createElement('span');
span.contentEditable = "true";
span.translate = "no";

document.body.appendChild(span)

Por alguna razon la propiedad translate ="no" se cambia a "yes" cuando se agrega al DOM. ¿como puedo solucionarlo?

2 respuestas 2

1

Primero, el atributo translate no es completamente estándar (es parte de la especificación propuesta HTML 5.1 entiendo) por lo que aunque todos los browsers la soporten, su implementación puede variar.

Segundo, un Element tiene propiedades (e.g. id, className) y atributos. Los atributos están agrupados dentro de la propiedad attributes. En particular, translate no es una propiedad sino un atributo. Cuando el browser se encuentra con el tag

 <span id="mi_elemento" translate="no">hello</span>

Lo incorpora al DOM con una propiedad attributes que a su vez contiene translate y cuyo valor es false. Muy burdamente

  • Element
    • tagName: SPAN
    • id: mi_elemento
    • attributes <---- por si a alguien le interesa este es un objeto de tipo NamedNodeMap
      • translate: false

El hecho de que "no" se interprete como false es una simple convención. De MDN:

Cadena vacía y "yes", que indica que el elemento debe de ser traducido cuando la página es localizada. "no", que indica que el elemento no debe de ser traducido.

Sin esa convención, para ilustrarlo, no tendría sentido que

<span translate></span>

Se parseara como true, cuando en JS puro en el mejor de los casos sería undefined.

En tu caso, puedes declarar span.translate = false en vez de span.translate = "no", o bien usar span.setAttribute('translate', 'no'); (me parece que lo segundo es más future-proof).

function createSpanWithId(id) {
  let span = document.createElement('span');
  span.id = id;
  return span;
}

let  conString = createSpanWithId('conString'),
     conBoolean = createSpanWithId('conBoolean'),
     conSetAttributeNo = createSpanWithId('conSetAttributeNo');

conString.translate = 'no'; 
// se interpretó como TRUE
console.log(conString, conString.translate);

conBoolean.translate = false;
console.log(conBoolean, conBoolean.translate);

conSetAttributeNo.setAttribute('translate', 'no');
console.log(conSetAttributeNo, conSetAttributeNo.translate);

Bonus Track

Como con cualquier objeto JS, el objeto devuelto por document.createElement permite que le asignes propiedades extra, pero aquellas sin sentido semántico no tienen influencia en la manera como se renderiza el DOM. Esto implica que

let span = document.createElement('span');
span.atributoCustom = "valorCustom";
span.id = "mi_elemento";
document.body.appendChild(span);

No genera en el DOM una entrada con "atributoCustom" dentro de "attributes". PEEERO, span.atributoCustom así como document.getElementById('mi_elemento').atributoCustom sí devuelve valorCustom y esto es algo bueno porque significa que puedes extender el elemento. Se recomienda eso sí usar un namespace para no pasar a llevar nada.

En en el flujo HTML -> DOM un atributo arbitrario en cambio sí termina dentro de attributes y hay que leerlo con span.getAttribute.

1

Por una parte la manera en que lo estás haciendo no es la correcta: Edita la linea:

span.translate = "no";

y añade lo siguiente:

span.setAttribute("translate","no");

Pero este atributo no lo soportan los navegadores Chrome, Edge, Zafari, Mozilla ni Opera. Lo correcto añadir una clase "notranslate" con esto el navegador sabe por defecto que ese elemento no será traducido:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p class="translate">Will be translated</p>
    <p class="notranslate">Will not be translated</p>
</body>
</html>
1
  • No tenia idea que no lo soportaba. alguna idea para no traducir un texto?. el 22 abr. 2020 a las 14:39

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.