[SOLUCIONADO] reemplazar estilos CSS en dependencia de sus propiedades

OdooPlay · #1 (**permalink**) 25/04/2016, 07:30

Hola amigos!
Me gustaría hacer un script que tuviese en cuenta varias propiedades de CSS, y en dependencia de 3 de sus valores las modifique de una manera u otra. Alguna pista por favor, es muy complicado.

Es decir:

MI ACTUAL CSS:

Código CSS:

Ver original.Estilo1 {
...
...
text-indent: 10px;
margin-left: 10px;
margin-right: 10px;
...
...
}
 
.Estilo2 {
...
...
text-indent: -10px;
margin-left: 10px;
margin-right: 10px;
...
...
}
 
.Estilo3 {
...
...
text-indent: -10px;
margin-left: 10px;
margin-right: 0;
...
...
}
 
.Estilo4 {
...
...
text-indent: 10px;
margin-left: 0;
margin-right: 0;
...
...
}

MI CSS DESPUÉS DE EJECUTAR EL SCRIPT:

Código CSS:

Ver original.Estilo1 {
...
...
text-indent: 1em;
margin-left: 1em;
margin-right: 1em;
...
...
}
 
.Estilo2 {
...
...
text-indent: -1em;
margin-left: 1em;
margin-right: 1em;
...
...
}
 
.Estilo3 {
...
...
text-indent: -1em;
margin-left: 1em;
margin-right: 0;
...
...
}
 
.Estilo4 {
...
...
text-indent: 1em;
margin-left: 0;
margin-right: 0;
...
...
}

gracias de antemano!

g3kdigital · #2 (**permalink**) 29/04/2016, 07:58

Esto es más labor de javascript que de css, no?

En segundo, puede usar multiclases si tienes las mismas propiedades en distintos elementos y solo varian en unas cuantas propiedades, así:

Código HTML:

Ver original<div class="row col-xs-6 estilo-similar estilo1">
<div class="row col-xs-6 estilo-similar estilo2">
<div class="row col-xs-6 estilo-similar estilo3">

Código CSS:

Ver original.estilo-similar
{
 /*estilos similares*/
}
 
.estilo1
{
margin: X;
}
 
.estilo2
{
margin: Y;
}
 
.estilo3
{
margin: z;
}

Igual puede ser algo que ya sepas.

OdooPlay · #3 (**permalink**) 20/08/2016, 12:29

Gracias g3kdigital, pero tengo que hacerlo con un Bash, y ya casi lo he conseguido. Pero aún tengo un error.

Mi archivo CSS y su ruta son: ./ePub/OEBPS/css/idGeneratedStyles.css

Con el siguiente Bash ejecutándolo en el Terminal de Mac o Linux, logro que cada estilo del CSS se me divida en un archivo independiente cada vez que encuentra caracter del final de estilo, es decir }

El script lo he llamado script.sh y es el siguiente codigo:

Código BASH:

Ver originalcat ./ePub/OEBPS/css/idGeneratedStyles.css | (
I=0;
echo "">./ePub/OEBPS/css/idGeneratedStyles0;
while read line;
do
echo $line >> ./ePub/OEBPS/css/idGeneratedStyles$I;
if [ "$line" == '}' ];
then I=$[I+1];
echo "" > ./ePub/OEBPS/css/idGeneratedStyles$I;
fi;
done;
)

Hasta aqui todo funciona correctamente, y después de ejecutarlo podríamos ver en nuestra carpeta, los siguientes archivos:
idGeneratedStyles.css
idGeneratedStyles0
idGeneratedStyles1
idGeneratedStyles2
idGeneratedStyles3

Pero ahora os enseño el script con el código para que al encontrar el estilo llamado "Estilo1" haga una modificación, y con el "Estilo2" otra diferente, etc...

Pero no funciona, creo que el error esta en la linea del "grep" que no reconoce el numero final del nombre del archivo y no hay manera de que funcione.
Una ayuda por favor:

Código BASH:

Ver originalcat ./ePub/OEBPS/css/idGeneratedStyles.css | (
I=0;
echo "">./ePub/OEBPS/css/idGeneratedStyles0;
while read line;
do
echo $line >> ./ePub/OEBPS/css/idGeneratedStyles$I;
if [ "$line" == '}' ];
then I=$[I+1];
echo "" > ./ePub/OEBPS/css/idGeneratedStyles$I;
fi;
 
 
############
if grep -qr Estilo1 "./ePub/OEBPS/css/idGeneratedStyles$I"; then
#delete the bad bleeding
perl -i -ne'/\margin-left/ or print' ./ePub/OEBPS/css/idGeneratedStyles$I;
perl -i -ne'/\margin-right/ or print' ./ePub/OEBPS/css/idGeneratedStyles$I;
perl -i -ne'/\text-indent/ or print' ./ePub/OEBPS/css/idGeneratedStyles$I;
 
#add the right bledding
perl -pi -w -e 's#}#margin-left:1em;margin-right:1em;text-indent:1em;}#g;' ./ePub/OEBPS/css/idGeneratedStyles$I;
 
fi;
done;
)
 
############
if grep -qr Estilo2 "./ePub/OEBPS/css/idGeneratedStyles$I"; then
#delete the bad bleeding
perl -i -ne'/\margin-left/ or print' ./ePub/OEBPS/css/idGeneratedStyles$I;
perl -i -ne'/\margin-right/ or print' ./ePub/OEBPS/css/idGeneratedStyles$I;
perl -i -ne'/\text-indent/ or print' ./ePub/OEBPS/css/idGeneratedStyles$I;
 
#add the right bledding
perl -pi -w -e 's#}#margin-left:-1em;margin-right:1em;text-indent:1em;}#g;' ./ePub/OEBPS/css/idGeneratedStyles$I;
 
fi;
done;
)
 
############
if grep -qr Estilo3 "./ePub/OEBPS/css/idGeneratedStyles$I"; then
#delete the bad bleeding
perl -i -ne'/\margin-left/ or print' ./ePub/OEBPS/css/idGeneratedStyles$I;
perl -i -ne'/\margin-right/ or print' ./ePub/OEBPS/css/idGeneratedStyles$I;
perl -i -ne'/\text-indent/ or print' ./ePub/OEBPS/css/idGeneratedStyles$I;
 
#add the right bledding
perl -pi -w -e 's#}#margin-left:-1em;margin-right:1em;text-indent:0;}#g;' ./ePub/OEBPS/css/idGeneratedStyles$I;
 
fi;
done;
)
 
############
if grep -qr Estilo4 "./ePub/OEBPS/css/idGeneratedStyles$I"; then
#delete the bad bleeding
perl -i -ne'/\margin-left/ or print' ./ePub/OEBPS/css/idGeneratedStyles$I;
perl -i -ne'/\margin-right/ or print' ./ePub/OEBPS/css/idGeneratedStyles$I;
perl -i -ne'/\text-indent/ or print' ./ePub/OEBPS/css/idGeneratedStyles$I;
 
#add the right bledding
perl -pi -w -e 's#}#margin-left:1em;margin-right:0;text-indent:0;}#g;' ./ePub/OEBPS/css/idGeneratedStyles$I;
 
fi;
done;
)

PD: Por favor administrador del forosdelweb, si lo considera oportuno, traslade este post a Linux pues será más fácil que alguien me ayude. Muchas gracias.

OdooPlay · #4 (**permalink**) 26/08/2016, 03:26

Solucionado!
concretamente este script puedes usarlo cuando exportes desde indesign, pues Indesign tras la exportación los eBooks no se ven correctamente.
Ten encuenta:

1º lo he testeado desde el terminal de Mac
2º el ebook cuando lo descomprimes tiene la siguiente roota:
./ePub/OEBPS/css/idGeneratedStyles.css

3º el archivo css original tras exportarlo de indesign se llama:
idGeneratedStyles.css

4º Tu simplemente tendrías que sustituir los nombres de tus stylos por los que pone abajo, por ejemplo:
en lugar de:
if grep -qr L0-R0-I4 $f; then

pondrías:
if grep -qr MI_ESTILO_CSS $f; then

5º en este script se modifica solo el margin-left, margin-right y text-indent, pero tu puedes escoger las propiedades que desees.

6º el script simplemente se encargará de:
- dividir todo tu CSS en archivos,
- eliminar las propiedades margin-left, margin-right y text-indent
- reemplazar el signo } por tus propiedades correctas.

7º Después si lo deseas también puedes eliminar todos los archivos CSS que se han creado y juntarlos todos en 1, que se debe llamar idGeneratedStyles.css.
Haciendo esto:

Código BASH:

Ver original############
# Delete the original CSS
rm ./ePub/OEBPS/css/idGeneratedStyles.css;
# merge the css files
cat ./ePub/OEBPS/css/GeneratedStyles* > ./ePub/OEBPS/css/idGeneratedStyles.css;
# If you're using bash (the default shell), the extglob shell option allows you to use an extended pattern matching syntax.
shopt -s extglob
#remove all files except the idGeneratedStyles.css
rm -r ./ePub/OEBPS/css/!(idGeneratedStyles.css)
 
sudo chown -Rv root ./ePub
chmod -R 777 ./ePub

8º También puedes eliminar lineas concretas de CSS:

Código BASH:

Ver original# DELETE CSS LINES. It´s optional. Delete specific lines creating a temporally file, from your CSS for show the pictures with a right size on devices
for x in ./ePub/OEBPS/css/idGeneratedStyles.css;
do
sed '2257,2258d' <"$x" >"$x.tmp"
mv "$x.tmp" "$x"
done
for x in ./ePub/OEBPS/css/idGeneratedStyles.css;
do
sed '2271,2272d' <"$x" >"$x.tmp"
mv "$x.tmp" "$x"
done

9º

Bueno tras esta descripción aqui, esta el código:

Código BASH:

Ver original#!/bin/bash
 
#####################################################################################
###START### MODIFY ALL BLEEDING STYLES FOR NICE APPEARANCE ON EPUB AND MOBI #########
#####################################################################################
# Split all the CSS styles from the Adobe Indesign into a separate files
cat ./ePub/OEBPS/css/idGeneratedStyles.css | (
I=0;
echo "">./ePub/OEBPS/css/GeneratedStyles0;
while read line;
do
echo $line >> ./ePub/OEBPS/css/GeneratedStyles$I;
if [ "$line" == '}' ];
then I=$[I+1];
echo "" > ./ePub/OEBPS/css/GeneratedStyles$I;
fi
done;
)
 
sudo chown -Rv root ./ePub/OEBPS/css/*
chmod -R 777 ./ePub/OEBPS/css/*
for f in `ls ./ePub/OEBPS/css/GeneratedStyles*` ; do
############
if grep -qr L0-R0-I4 $f; then 
        
perl -i -ne'/margin-left/ or print' $f;
perl -i -ne'/margin-right/ or print' $f;
perl -i -ne'/text-indent/ or print' $f;
 
#add the right bledding
perl -pi -w -e 's#}#margin-left:0;margin-right:0;text-indent:1em;\}#g;' $f
echo "working on css file $I %";
fi
 
############
if grep -qr L0-R0-I5 $f; then
#delete the bad bleeding
perl -i -ne'/margin-left/ or print' $f;
perl -i -ne'/margin-right/ or print' $f;
perl -i -ne'/text-indent/ or print' $f;
 
#add the right bledding
perl -pi -w -e 's/}/margin-left:0;margin-right:0;text-indent:1em;\}/g' $f
echo "working on css file $f %";
fi;
 
############
if grep -qr L0-R0-I3 $f; then
#delete the bad bleeding
perl -i -ne'/margin-left/ or print' $f;
perl -i -ne'/margin-right/ or print' $f;
perl -i -ne'/text-indent/ or print' $f;
 
#add the right bledding
perl -pi -w -e 's/}/margin-left:0;margin-right:0;text-indent:1em;\}/g;' $f
echo "working on css file $f %";
fi;
############
if grep -qr L0-R0-I5 $f; then
#delete the bad bleeding
perl -i -ne'/margin-left/ or print' $f;
perl -i -ne'/margin-right/ or print' $f;
perl -i -ne'/text-indent/ or print' $f;
 
#add the right bledding
perl -pi -w -e 's/}/margin-left:0;margin-right:0;text-indent:1em;\}/g' $f
echo "working on css file $f %";
fi;
 
############
if grep -qr L6-R0-I-4 $f; then
#delete the bad bleeding
perl -i -ne'/margin-left/ or print' $f;
perl -i -ne'/margin-right/ or print' $f;
perl -i -ne'/text-indent/ or print' $f;
 
#add the right bledding
perl -pi -w -e 's/}/margin-left:0;margin-right:0;text-indent:1em;\}/g;' $f
echo "working on css file $f %";
fi;
############
if grep -qr L6-R6-I0 $f; then
#delete the bad bleeding
perl -i -ne'/margin-left/ or print' $f;
perl -i -ne'/margin-right/ or print' $f;
perl -i -ne'/text-indent/ or print' $f;
 
#add the right bledding
perl -pi -w -e 's/}/margin-left:0;margin-right:0;text-indent:1em;\}/g' $f
echo "working on css file $f %";
fi;
 
############
if grep -qr L6-R6-I3 $f; then
#delete the bad bleeding
perl -i -ne'/margin-left/ or print' $f;
perl -i -ne'/margin-right/ or print' $f;
perl -i -ne'/text-indent/ or print' $f;
 
#add the right bledding
perl -pi -w -e 's/}/margin-left:0;margin-right:0;text-indent:1em;\}/g;' $f
echo "working on css file $f %";
fi;
############
if grep -qr L14-R4-I-5 $f; then
#delete the bad bleeding
perl -i -ne'/margin-left/ or print' $f;
perl -i -ne'/margin-right/ or print' $f;
perl -i -ne'/text-indent/ or print' $f;
 
#add the right bledding
perl -pi -w -e 's/}/margin-left:0;margin-right:0;text-indent:1em;\}/g;' $f
echo "working on css file $f %";
fi;
############
if grep -qr CHAPTER_eBook_03-Biblio-entry---2-lines-List-1-to-9---EBOOK $f; then
#delete the bad bleeding
perl -i -ne'/margin-left/ or print' $f;
perl -i -ne'/margin-right/ or print' $f;
perl -i -ne'/text-indent/ or print' $f;
 
#add the right bledding
perl -pi -w -e 's/}/margin-left:0;margin-right:0;text-indent:1em;\}/g' $f
echo "working on css file $f %";
fi;
 
############
if grep -qr CHAPTER_eBook_03-Biblio-entry---subtitle-List-1-to-9---EBOOK $f; then
#delete the bad bleeding
perl -i -ne'/margin-left/ or print' $f;
perl -i -ne'/margin-right/ or print' $f;
perl -i -ne'/text-indent/ or print' $f;
 
#add the right bledding
perl -pi -w -e 's/}/margin-left:0;margin-right:0;text-indent:1em;\}/g;' $f
echo "working on css file $f %";
fi;
done;
 
 
 
 
 
 
###END### MODIFY ALL BLEEDING STYLES FOR NICE APPEARANCE ON EPUB AND MOBI #########
#####################################################################################