Police Numérique digitale sans font(pour compteur par exemple)

**SpaceFrog** · 05/03/2010, 12h07

Comme chacun sait les polices affichables par le navigateur sont limitées à celle installées sur le poste client. Il existe des solutions de polices distantes, c'est a dire hébérgées sur le serveur, mais elle ne sont pas crossbrowser.
ensuite il y a les solutions coté serveur en générant des images avec le langage serveur.

Voici une proposition qui permet de s'affranchir de toute police de caractère ou d'image afin, d'obtenir un resultat qui ressemble à une font digital:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Nouvelle page 1</title>
<script type="text/javascript">
function NombreBis(val){
var Compteur=val.toString().split('');
var topborder = new Array([1,1,0,1],[0,1,0,0],[1,1,1,0],[1,1,1,0],[0,1,1,1],[1,0,1,1],[1,0,1,1],[1,1,0,0],[1,1,1,1],[1,1,1,1]);
var botborder = new Array([0,1,1,1],[0,1,0,0],[1,0,1,1],[1,1,1,0],[1,1,0,0],[1,1,1,0],[1,1,1,1],[0,1,0,0],[1,1,1,1],[1,1,1,0]);
var i=0;
 
var bcontainer = document.createElement('div');
bcontainer.className="fig"
var btopfig = document.createElement('div');
btopfig.className="figt"
var bbotfig = document.createElement('div');
bbotfig.className="figb"
 
while(Compteur[i++]){
var container=bcontainer.cloneNode(true)
var bc=""
 
var topfig=btopfig.cloneNode(true)
for(bar in topborder[Compteur[i-1]]){bc+=topborder[Compteur[i-1]][bar]?"black ":"white "}
topfig.style.borderColor=bc
bc="";
var botfig=bbotfig.cloneNode(true)
for(bar in botborder[Compteur[i-1]]){ bc+=botborder[Compteur[i-1]][bar]?"black ":"white "}
botfig.style.borderColor=bc
 
container.appendChild(topfig);
container.appendChild(botfig);
document.body.appendChild(container)
 }
 
}
</script>
 
<style type="text/css">
html, body {
	height:100%;
	width:100%;}
 
.fig {
	position: relative;
   	float:left;
   	height:15px;
   	width:10px;
   	margin:5px;
	}
 
.figt, .figb {
	width:10px;
  	height:9px;
  	border: solid;
  	font-size:0;
   	line-height:0;
   	float:left;
   	position: relative;
   	}
 
.figt {
	border-width: 4px 4px 2px 4px;
    }
 
.figb {
    border-width: 2px 4px 4px 4px;
    }        
</style>
 
</head>
<body onload="NombreBis(1021256897)">
</body>
</html>

une petite page de test en ligne pour voir le rendu

.

**Bovino** · 05/03/2010, 13h13

T'as encore rêvé cette nuit ?

Sympa comme script. Manque plus que le séparateur décimal

**SpaceFrog** · 05/03/2010, 13h38

Séparateur décimal ?
Mouaip... mais étant parti sur l'idée d'un compteur de hits sur un site web, je n'avais pas envisagé que des demi portions se connectent

On peut etendre le principe à l'aphabet également avec un array littéral pour simplifier...

Autre possibilité, une image par caractère :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Nouvelle page 1</title>
<script type="text/javascript" src="JQScripts/jquery-1.1.3.1.min.js"></script>
 
<script type="text/javascript">
function chiffre(num){
var newNum =document.createElement('img')
newNum.src=num+'.png'
newNum.classNam="fig";
return newNum 
}
 
function Nombre(val){
var Compteur=val.toString().split('');
var i=0;
var container = document.createElement('div')
while(Compteur[i++]){
 container.appendChild(chiffre(Compteur[i-1]));
 }
document.body.appendChild(container)
}
 
 
 
</script>
<style type="text/css">
.fig {flaot:left;}
</style>
 
</head>
 
<body onload="Nombre(102)">
 
</body>
</html>

avec des images 0.png, 1.png, 2.png ...

la page de test en ligne

du coup ça devient plus facile à étendre à l'alphabet avec a.png

**benwit** · 29/07/2010, 18h35

Envoyé par SpaceFrog

Séparateur décimal ?
Mouaip... mais étant parti sur l'idée d'un compteur de hits sur un site web, je n'avais pas envisagé que des demi portions se connectent

Excellent !!! pdr