Aligner le texte verticalement à côté de SVG dans xsl

Question

J'essaie d'aligner un texte à côté d'une image SVG dans un XSL qui est ensuite utilisé pour créer un pdf.

C'est là que je la fois du texte et SVG mis en place:

<fo:block font-size="14pt" text-align="center" margin-top="2cm"> 
    <fo:instream-foreign-object> 
     <svg:svg width="30" height="30" xml:space="preserve"> 
      <svg:g style="fill:none; stroke:black; stroke-width:1"> 
       <svg:rect x="0" y="0" width="30" height="30"/> 
      </svg:g> 
     </svg:svg> 
    </fo:instream-foreign-object> 

    Mark If Closed 
</fo:block> 

C'est la sortie:

Je veux que le texte « Cochez cette case si fermé » être verticalement le milieu avec le carré SVG.

Answer 1

Si la taille du carré est constante, vous pouvez jouer avec le décalage de ligne de base. Compte tenu de la hauteur SVG de 30 et de la taille de police de 14pt, un décalage de base d'environ 5pt le ferait.

  <fo:block font-size="14pt" text-align="center" background-color="silver"> 
      <fo:instream-foreign-object> 
       <svg:svg xmlns:svg="http://www.w3.org/2000/svg" width="30" height="30" xml:space="preserve"> 
         <svg:g style="fill:none; stroke:black; stroke-width:1"> 
          <svg:rect x="0" y="0" width="30" height="30"/> 
         </svg:g> 
       </svg:svg> 
      </fo:instream-foreign-object><fo:inline background-color="yellow" baseline-shift="5pt">Mark If Closed</fo:inline></fo:block> 

Rendements cette (couleur ajoutée pour plus de clarté):

Answer 2

Laissez le formatter dehors ...

Faites le formatter faire le calcul (en supposant que line-height (voir https://www.w3.org/TR/xsl11/#line-height) est '1,2'):

<fo:block font-size="14pt" text-align="center" margin-top="2pt" 
    background-color="silver"> 
    <fo:instream-foreign-object baseline-shift="-((30pt - 1em * 1.2) div 2)"> 
     <svg:svg xmlns:svg="http://www.w3.org/2000/svg" width="30" height="30" xml:space="preserve"> 
    <svg:g style="fill:none; stroke:black; stroke-width:1"> 
     <svg:rect x="0" y="0" width="30" height="30" /> 
    </svg:g> 
</svg:svg> 
    </fo:instream-foreign-object> 
    <fo:inline background-color="yellow">Mark If Closed</fo:inline> 
</fo:block> 

Déplacer la boîte vers le bas de 50%:

<fo:block font-size="14pt" text-align="center" margin-top="2pt" 
    background-color="silver"> 
    <fo:instream-foreign-object baseline-shift="-50%"> 
     <svg:svg xmlns:svg="http://www.w3.org/2000/svg" width="30" height="30" xml:space="preserve"> 
      <svg:g style="fill:none; stroke:black; stroke-width:1"> 
       <svg:rect x="0" y="0" width="30" height="30" /> 
      </svg:g> 
     </svg:svg> 
    </fo:instream-foreign-object> 
    <fo:inline background-color="yellow">Mark If Closed</fo:inline> 
</fo:block> 

Utilisez alignment-baseline sur le fo:instream-foreign-object (voir https://www.w3.org/TR/xsl11/#alignment-baseline):

<fo:block font-size="14pt" text-align="center" margin-top="2pt" 
    background-color="silver"> 
    <fo:instream-foreign-object alignment-baseline="middle"> 
     <svg:svg xmlns:svg="http://www.w3.org/2000/svg" width="30" height="30" xml:space="preserve"> 
    <svg:g style="fill:none; stroke:black; stroke-width:1"> 
     <svg:rect x="0" y="0" width="30" height="30" /> 
    </svg:g> 
</svg:svg> 
    </fo:instream-foreign-object> 
    <fo:inline background-color="yellow">Mark If Closed</fo:inline> 
</fo:block>