← Journal technique
EduQate·frontend·2026-08-18

Une étiquette arabe coupée par une largeur pensée pour l'anglais

A fixed maxWidth sized for English hard-clipped an Arabic label with numberOfLines={1}; React Native Web truncates at that width without an ellipsis.

Visible seulement en s'en servant

Invisible à la relecture du code. Trouvé en étant le vrai utilisateur, sur un vrai appareil, à une vraie largeur.

L'indicateur de progression de l'inscription mobile avait stepLabel: { maxWidth: 64 } avec numberOfLines={1}. « Personal info » rentre tout juste. « المعلومات الشخصية » non, et la troncature de React Native Web à cette largeur n'ajoute pas de points de suspension, elle coupe net — donc l'étiquette s'affichait comme un demi-mot cassé se terminant sur un trait de liaison nu.

Ça m'est arrivé comme « le texte arabe ne s'affiche pas bien », ce qui est la façon dont les bugs de mise en page bilingue arrivent : comme une plainte vague sur la langue, pas sur la mise en page. Chaque largeur fixe dans une application bilingue est un pari que la traduction la plus longue rentre, et l'arabe n'est pas fiablement plus court que l'anglais.