Esco da uno degli ultimi progetti di branding in Dev4Side, in cui abbiamo personalizzato fortemente la UI di una intranet SharePoint 2010 su 9 country differenti. Un bel lavoro eh, ma molto impegnativo.

Tra le varie cose ci siamo accorti che, dopo l'applicazione del nostro layout custom, la barra dei Ribbon aveva dei problemi di altezza dei contenuti, in tutti i siti creati in lingua italiana. Il problema era molto evidente: la maggior parte dei pulsanti della barra dei ribbon, con un testo che andava su due righe, avevano un altezza superiore rispetto a quella della barra stessa, causando così uno sgradevole risultato.
Ora non ho qui con me l'immagine per farvi vedere il problema, ma se vi capita almeno sapete dove andare a mettere le mani.

Il problema vero infatti è che con la grafica di default questo malfunzionamento non è evidente.. anzi, è quasi impercettibile.
Noi ce ne siamo accorti perchè il nostro committente ci ha chiesto di utilizzare un font particolare su tutta la intranet e, con quel font i testi della barra dei Ribbon prendevano più spazio in altezza rispetto a quanto avrebbero dovuto.

Vi faccio vedere dove si può vedere il problema. Guardate il pulsante "download a copy" prima su un sito creato in lingua inglese (a sinistra) e poi in un sito creato in lingua italiana (a destra).



Ve l'ho detto.. con il layout e il font di default questo problema è quasi impercettibile.
Se guardate per bene questa immagine però, vi accorgerete che le due righe del contenuto del pulsante in lingua italiana, hanno uno spazio maggiore l'una dall'altra, rispetto a quelle del contenuto in lingua inglese. E' come se avessero proprio due configurazioni diverse per l'altezza della riga.

La prima cosa che ci è venuta in mente è stata quella di fare F12 ed andare a vedere il DOM e lo stile CSS legate al pulsante.


Nel pulsante del sito italiano, vediamo che la proprietà "line-height" della classe CSS che è legata l nostro pulsante (la classe .ms-cui-ctl-largelabel, non viene letta correttamente.
Li per lì non ci ho fatto caso subito, ma poi guardando bene ho capito il perchè...
Al posto della direttiva !important, c'è scritto !importante !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
Non ci volevo credere..
Pare che al team di SharePoint sia partito un replace di troppo, durante la fase di localizzazione delle label per la creazione del language pack in italiano. Con gli altri language pack (non gli ho provati tutti ovviamente), non mi pare che ci sia questo problema. Ma non ci metterei la mano sul fuoco.

Se andate a vedere il file corev4.css troverete le prove:


Questa è bella eh? :)
Inoltre l'occorrenza che vi ho evidenziato nell'immagine non è l'unica. Ce ne sono altre 3 o 4 se non mi ricordo male.
Ad oggi non ho trovato nessun aggiornamento che risolve questa cosa e, per risolvere il problema, l'unico modo è quello di correggere manualmente il file css incriminato.

Se vi capita quindi di avere problemi di spazio (in altezza) con la barra dei Ribbon di un sito SharePoint 2010 in italiano, ora sapete il perchè. Spero sia utile a qualcuno.