Blog

Lorem ipsum, mais en souriant

Du texte qui prend forme

Le lorem ipsum ne dit rien : c’est précisément ce qui le rend utile pour regarder autre chose que le sens. Ici, il ne remplit pas une colonne, il remplit une silhouette. Les mots sont justifiés ligne à ligne à l’intérieur d’un masque, et les blancs laissés au milieu de la masse de texte dessinent deux yeux et une bouche.

Le dessin

Le bloc ci-dessous est en chasse fixe : chaque caractère occupe la même largeur, sinon la forme s’effondrerait. C’est la seule chose qu’il emprunte au code — pas de cadre, pas de fond, la même couleur que le reste de la page. Sur un écran étroit, la taille diminue au lieu de laisser la moitié du visage hors champ.

                              lorem ipsum
                      dolor  sit  amet consectetur
                  adipiscing   elit   sed  do  eiusmod
               tempor  incididunt  ut  labore  et  dolore
            magna  aliqua  ut  enim  ad  minim  veniam  quis
          nostrud exercitation ullamco laboris nisi ut aliquip
         ex  ea  commodo  consequat  duis  aute  irure dolor in
       reprehenderit    in  voluptate velit esse    cillum dolore
      eu    fugiat           nulla pariatur            excepteur
     sint occaecat           cupidatat non            proident sunt
    in  culpa  qui          officia deserunt          mollit anim id
     est laborum          lorem   ipsum  dolor           sit amet
      consectetur       adipiscing  elit  sed do    eiusmod    tempor
  incididunt  ut labore et dolore magna aliqua ut enim ad minim veniam
  quis  nostrud  exercitation  ullamco  laboris  nisi ut aliquip ex ea
  commodo   consequat  duis  aute  irure  dolor  in  reprehenderit  in
  voluptate   velit  esse  cillum  dolore  eu  fugiat  nulla  pariatur
  excepteur  sint  occaecat  cupidatat  non proident sunt in culpa qui
     officia           deserunt  mollit  anim  id        est   laborum
   lorem   ipsum             dolor sit amet              consectetur
   adipiscing elit          sed  do  eiusmod              tempor
    incididunt    ut                                labore et dolore
     magna  aliqua  ut                            enim   ad   minim
      veniam quis nostrud                         exercitation
       ullamco  laboris  nisi              ut   aliquip   ex   ea
         commodo   consequat   duis   aute   irure   dolor   in
          reprehenderit  in voluptate velit esse cillum dolore
            eu fugiat nulla pariatur excepteur sint occaecat
               cupidatat  non  proident sunt in culpa qui
                  officia  deserunt mollit anim id est
                      laborum  lorem  ipsum  dolor
                                sit amet

Description pour qui ne verrait pas la forme : un visage rond composé uniquement de mots latins, avec deux ouvertures ovales en haut pour les yeux et un large arc évidé en bas pour la bouche — un smiley.

Pourquoi ça marche sans JavaScript

Rien ici n’est calculé dans le navigateur. La disposition est figée au moment de la génération du site : le générateur produit les lignes, Typst les place dans un <pre> nu, et une règle CSS lui retire l’apparence d’un bloc de code. Aucun script, aucune police distante, aucune image — le smiley pèse exactement le poids de son texte.

Et le reste du remplissage

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.