Le cours et les exercices se font en ligne sur http://moodle.iutv.univ-paris13.fr.
Nous nous sommes interrogés la dernière fois sur le premier TP moodle au sujet des polices de caractères. Dans un des exercices il fallait saisir la réponse 64. Nous ne comprenions pas quel était le lien de cette valeur avec la taille de la police/fonte. Nous avions relevé que la taille d'un texte ne correspondait pas à la taille de la police multiplié par le nombre de caractères. Ainsi si la fonte-size est 12pt et le texte « Hello » la taille du texte n'est pas 5*12=60pt
La réalité est plus complexe. En fait la fonte-size peut être relative à la résolution de l'écran, ou relative à un paramètre du navigateur, ou encore relative à un élément parent du texte. Je vous joint un programme HTML+javascript (testPolice.html) qui permet d'observer des largeurs de chaines de caractères, en fonction de différentes propriétés de polices de caractères. Vous pouvez interpréter ce programme via votre navigateur sur l'url : https://lipn.univ-paris13.fr/~cerin/CIG-S1/testPolice.html
La question initiale d'un étudiant discutée dans ce post était la suivante. Comment "extraire" une partie d'une image bitmap pour en faire une zone clickable ?
C'est la notion de Clip ou Clipping qui va nous permettre l'extration d'une partie d'une image. The definition of a clipping is something that has been cut out or off. An example of a clipping is a piece of art that's been cut from a magazine.
C'est une notion ancienne. Personnelement je me rappelle avoir programmé du Clipping avec le langage PostScript (ttps://fr.wikipedia.org/wiki/PostScript)... à la fin des année 80 ! Le PostScript est un langage de description de page mis au point par Adobe. PostScript permet une description vectorielle de la page et de tous les éléments graphiques la composant. Ainsi une page d'impression n'est pas vue comme un bitmap mais comme un ensemble d'objets.
SVG (Scalable Vector Graphics - https://fr.wikipedia.org/wiki/Scalable_Vector_Graphics) est un format de données conçu pour le Web, comme HTML. C'est aussi un format vectoriel. Un fichier HTML peut faire appel a une description SVG. Le premier exemple de code SVG est simple à comprendre. Pour le visualiser taper l'url suivante dans votre navigateur : http://lipn.univ-paris13.fr/~cerin/CIG-S1/svg1.html
Vous avez un deuxième exemple ici : http://lipn.univ-paris13.fr/~cerin/CIG-S1/bird.svg Cet exemple montre que les navigateurs actuels supportent nativement SVG. Le support de SVG par plugins n'est plus maintenu.
Pour commencer avec SVG, je vous recommande la page : https://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html Vous y trouverez des informations sur le Clipping (clip-path).
Il y a d'autres exemples de code SVG ici :
... et un exemple de HTML faisant appel a du SVG ici : https://lipn.univ-paris13.fr/~cerin/ipdps2002/image.htm
Pour en revenir à notre problème initial, je vous recommande la page : https://css-tricks.com/clipping-masking-css/ ainsi que la page : https://css-tricks.com/using-svg/ pour le lien avec SVG.
