Bairos: You need to add the HTML code; it’s difficult to see the problem with just the CSS code.
Steczo: You probably mean that?
Bissett: Right, that’s what i meant.
Steczo: Right, using line-style-image is quite inflexible
Steczo: Many including myself use a pseudoelement before insetad
Steczo: Are you using s*** btw?
Crnkovich: Hello, is there any real word scenarion, when it would be preferable to use matrix transformation instead of cl***ical: rotate,skew,scale,etc?
Detjen: I’m just using a simple custom-css plugin for the wordpress.
Nevland: The majority of this site is designed via wordpress dashboard.
Danyow: Whenever you need a transformation matric, px1mp
Steczo: Http://www.useragentman.com/blog/2011/01/07/css3-matrix-transform-for-the-mathematically-challenged/
Chowdhury: Losingmymind: I think it’s just the size of the image for list-style-image that’s the problem.
Lally: It is convinient for computing
Concepcion: You can simply do operations between the matrices
Saxman: Losingmymind: However as others have said, it’s far more flexible to use the :before pseudo-element, and making list-style-type “none” instead.
Loiacono: Instead of having to work atomically with just rotate and scale, etc
Steczo: Some kind of shorthand I guess?
Mason: Losingmymind: Using list-style-type is very inflexible in terms of positioning the image, so use :before and set a width/height and background-image on that, or set a background-image directly on li{.} both cases use “list-style-type: none”
Mctighe: Px1mp: only one I can think of offhand, would be a webgl animation with some js manipulation, could use a matrix to move some things about in certain behaviour
Steczo: When you got something like s***, there are mixins that makes it quite easy
Steczo: Postcss/stylus/less, too ofc
Steczo: Vertical-align: baseline; should make it align nicely
Steczo: Using em for width/height to lock the bullet dimensions to text as usually intended
Steczo: That’s what I do – it works nice usually
Stramiello: Hmm, in html you can do a css transform:translateZ0 and create a new gpu layer, however the same trick doesn’t seem to work from svg css
Gastelum: What about HTML with SVG in it
Hyden: I am trying to do highlighting on an epub which is essentially HTML5 inside the epub file, but whenever I set the background color for a SPAN element, it doesn’t actually cover the entire text. The width is right, but it seems to basically be covering only the lower case portion of the words.
Semo: That was my next thought; trying that now
Lenart: Jswensen: .in what UA?
Ballin: It happens in both Chrome and Safari OSX. I ***ume it is something weird with the span sizes as they are given in absolute with just top and left specified, but I don’t know enough CSS to know how to fix it.
Rickson: Jswensen: if you want to use a browser, why not clean up the code so it’s plain HTML/CSS
Montaivo: Reisio: wrapping it in html didn’t seem to help :/
Gosvener: Mbm: what about embedding the SVG via an ‘object’
Piersall: And transforming that object
Ehrenberg: Reisio: svg itself has some css animations, so what I’m trying to do is avoid redrawing the entire svg every animation frame
Diel: Reisio: That is kindof the point. The HTML/CSS is auto-generated from Adobe InDesign for an epub. I am trying to figure out how to add a minimal amount of javascript to essentially highlight the book text as an audio file is played. The HTML already has a different SPAN element for each word in the book. So, I was just trying to set the background color for the appropriate SPAN element id as that word is read. The problem is that the background-color
Matto: Doesn’t seem to be covering all of the text for a given word. It only covers a portion of it.