2014-02-20

Word wrap en SVG

El elemento text de svg no tiene forma de decirle que corte el texto en líneas respetando un ancho, ni como cambiar el font de una parte del texto, etc. Por suerte existe otro elemento que se llama foreignobject y sirve, entre otras cosas para embeber html. Y obvio que el html embebido puede hacer word wrap (como siempre en html). Cuando pueda lo voy a probar bien, por ahora pueden ver en este artículo como usarlo.

Happy hacking,
Aureliano

2014-02-13

CSS selector, hijo de un nodo

Update: Lo probé en Firefox 24 y no anda. La funcionalidad está implementada pero no está habilitado en la configuración por defecto (https://developer.mozilla.org/en-US/docs/Web/CSS/:scope).

En un montón de bibliotecas para el browser, como d3 o jquery podemos usar selectores de CSS para elegir nodos que son descendientes de un conjunto de nodos dado. Esta funcionalidad, casi siempre está basada en el método elem.querySelectorAll(css_selector). Hoy descubrí algo muy interesante de este método. Hay una pseudo-clase de css que se llama :scope y cuando es usada en el selector del método de arriba refiere al elem sobre el que se hizo la consulta.
Ésta pseudo-clase, la podemos usar para elegir a los hijos de un elemento que cumplan cierta condición. Por ejemplo, elem.querySelectorAll(":scope > .klass") busca todos los elementos hijos (y solo hijos, no nietos) de elem que tienen klass como clase.
Como las bibliotecas que mencioné al principio usan esto en sus entrañas, también se puede usar en las mismas cuando buscás nodos. Por ejemplo, en d3 sería algo así: my_selection.selectAll(":scope > g").
Happy hacking,
Aureliano.
PD: La información original sobre cómo hacer esto la saqué de acá.
PD2: Lo probé con d3 en mi Chrome y anda. La documentación de Firefox también dice que anda, pero no lo probé. El resto de los browsers son un misterio para mi. Si lo prueban en otros contextos, avisen.