capsize
@capsizecss
SACSIZE rend le dimensionnement et la mise en page du texte aussi prévisibles que tous les autres éléments de l'écran.
À l'aide de métadonnées de police, le texte peut désormais être dimensionné en fonction de la hauteur de ses majuscules tout en réduisant l'espace au-dessus des lettres majuscules et en dessous de la ligne de base.
npm install @capsizecss/corefont-facecreateStyleObjectRenvoie un objet de style CSS-in-JS.
createStyleObject transmettant les options pertinentes. import { createStyleObject } from '@capsizecss/core' ;
const capsizeStyles = createStyleObject ( {
fontSize : 16 ,
leading : 24 ,
fontMetrics : {
capHeight : 700 ,
ascent : 1058 ,
descent : - 291 ,
lineGap : 0 ,
unitsPerEm : 1000 ,
} ,
} ) ;Remarque: il est recommandé d'installer le package @ capsizecss / métriques et d'importer les mesures à partir de là:
import { createStyleObject } from '@capsizecss/core' ;
import arialMetrics from '@capsizecss/metrics/arial' ;
const capsizeStyles = createStyleObject ( {
fontSize : 16 ,
leading : 24 ,
fontMetrics : arialMetrics ,
} ) ;Voir l'option Fontmetrics documentée ci-dessous pour plus de moyens d'obtenir ces mesures.
css Prop. < div
css = { {
// fontFamily: '...' etc,
... capsizeStyles ,
} }
>
My capsized text ?
< / div>
️ Remarque: il n'est pas recommandé d'appliquer d'autres styles liés à la disposition au même élément, car cela risquera d'interférer avec les styles utilisés pour la garniture. Envisagez plutôt d'utiliser un élément imbriqué.
createStyleString Renvoie une chaîne CSS qui peut être insérée dans une balise style ou annexée sur une feuille de style.
createStyleString en passant les options pertinentes. import { createStyleString } from '@capsizecss/core' ;
import arialMetrics from '@capsizecss/metrics/arial' ;
const capsizedStyleRule = createStyleString ( 'capsizedText' , {
fontSize : 16 ,
leading : 24 ,
fontMetrics : arialMetrics ,
} ) ;style et appliquez le nom de classe spécifié. document . write ( `
<style type="text/css">
${ capsizedStyleRule }
</style>
<div class="capsizedText">
My capsized text ?
</div>
` ) ;
️ Remarque: il n'est pas recommandé d'appliquer d'autres styles liés à la disposition au même élément, car cela risquera d'interférer avec les styles utilisés pour la garniture. Envisagez plutôt d'utiliser un élément imbriqué.
SALNISIZE prend en charge deux méthodes de définition de la taille du texte, capHeight et fontSize .
Remarque: vous ne devez passer que l'un ou l'autre, pas les deux.
capHeight: <number>Définit la hauteur des majuscules à la valeur définie. La définition de la typographie de cette manière s'aligne sur une grille ou avec d'autres éléments, par exemple des icônes, une brise.
fontSize: <number> La définition de la taille de la police vous permet d'obtenir tous les avantages de la coupe de l'espace blanc, tout en spécifiant une font-size explicite pour votre texte. Cela peut être utile lorsque cela est nécessaire pour correspondre à une spécification de conception en béton ou à installer dans un produit existant.
Le chapsage prend en charge deux modèles mentaux pour spécifier la hauteur de la ligne, lineGap et leading . Si vous passez ni l'un ni l'autre, le texte suivra l'espacement par défaut de la police spécifiée, par exemple, line-height: normal .
Remarque: vous ne devez passer que l'un ou l'autre, pas les deux.
lineGap: <number>Définit le nombre de pixels entre les lignes, comme mesuré entre la ligne de base et la hauteur du capuchon de la ligne suivante.
leading: <number>Définit la hauteur de la ligne à la valeur fournie mesurée à partir de la ligne de base du texte. Cela aligne le Web sur la façon dont la typographie est traitée dans les outils de conception.
Ces métadonnées sont extraites des tables de métriques à l'intérieur de la police elle-même. Il existe plusieurs façons de trouver ces informations:
Si vous utilisez une police Google ou une police système, installez le package @ capsizecss / métriques et importez les mesures par nom. Par exemple:
import arialMetrics from '@capsizecss/metrics/arial' ;Si vous utilisez une police à partir d'un fichier, installez le package @ capsizecss / déballer et extraire directement les mesures du fichier de police. Par exemple:
import { fromFile } from '@capsizecss/unpack' ;
const metrics = await fromFile ( filePath ) ; Ou, utilisez le site Web SALSIZE pour les trouver en sélectionnant un onglet Police et en référençant Metrics à l'étape 3.
Le package de base offre également quelques autres fonctionnalités basées sur des métriques pour améliorer la typographie sur le Web:
Crée des déclarations @font-face basées sur des métriques pour améliorer l'alignement des secours de la famille Font, ce qui peut améliorer considérablement la métrique de décalage de disposition cumulative pour les sites qui dépendent d'une police Web.
Considérez l'exemple suivant, où la police Web souhaitée est le homard, retombant à Helvetica Neue puis Arial , par exemple font-family: Lobster, 'Helvetica Neue', Arial .
createFontStack à partir du package de base: import { createFontStack } from '@capsizecss/core' ; import lobster from '@capsizecss/metrics/lobster' ;
import helveticaNeue from '@capsizecss/metrics/helveticaNeue' ;
import arial from '@capsizecss/metrics/arial' ;font-family . const { fontFamily , fontFaces } = createFontStack ( [
lobster ,
helveticaNeue ,
arial ,
] ) ; La valeur retournée contient les déclarations de face de police générées ainsi que la fontFamily calculée avec les alias de police ordonnés correctement.
Les valeurs renvoyées peuvent être imprimées dans une feuille de style ou un bloc style . Voici un exemple de modèle de guidon:
< style type =" text/css " >
.heading {
font-family: {{ fontFamily }}
}
{{ fontFaces }}
</ style >Cela produira le CSS suivant:
. heading {
font-family : Lobster , 'Lobster Fallback: Helvetica Neue' ,
'Lobster Fallback: Arial' , 'Helvetica Neue' , Arial;
}
@font-face {
font-family : 'Lobster Fallback: Helvetica Neue' ;
src : local ( 'Helvetica Neue' );
ascent-override : 115.1741 % ;
descent-override : 28.7935 % ;
size-adjust : 86.8251 % ;
}
@font-face {
font-family : 'Lobster Fallback: Arial' ;
src : local ( 'Arial' );
ascent-override : 113.5679 % ;
descent-override : 28.392 % ;
size-adjust : 88.053 % ;
} Si vous travaillez avec une bibliothèque CSS-in-JS, les fontFaces renvoyés peuvent être fournies en tant qu'objet de style JavaScript en fournissant styleObject en tant qu'option fontFaceFormat .
Voici un exemple utilisant l'émotion:
import { Global } from '@emotion/core' ;
const { fontFaces , fontFamily } = createFontStack (
[ lobster , helveticaNeue , arial ] ,
{
fontFaceFormat : 'styleObject' ,
} ,
) ;
export const App = ( ) => (
< >
< Global styles = { fontFaces } / >
< p css = { { fontFamily } } > ... < / p >
< / >
) ;Il est également utile comme source de manipulation supplémentaire, car il s'agit d'une structure de données qui peut être itérée ou étendue.
font-face supplémentaires Des propriétés supplémentaires peuvent être ajoutées aux déclarations générées @font-face via l'option fontFaceProperties :
const { fontFamily , fontFaces } = createFontStack (
[ lobster , helveticaNeue , arial ] ,
{
fontFaceProperties : {
fontDisplay : 'swap' ,
} ,
} ,
) ;Cela entraînera les ajouts suivants aux déclarations:
@font-face {
font-family: 'Lobster Fallback: Helvetica Neue';
src: local('Helvetica Neue');
ascent-override: 115.1741%;
descent-override: 28.7935%;
size-adjust: 86.8251%;
+ font-display: swap;
}
@font-face {
font-family: 'Lobster Fallback: Arial';
src: local('Arial');
ascent-override: 113.5679%;
descent-override: 28.392%;
size-adjust: 88.053%;
+ font-display: swap;
}Note
La transmission de l'une des propriétés CSS de remplacement métrique sera ignorée car elles sont calculées par chavire. Cependant, la propriété size-adjust est acceptée pour prendre en charge le réglage fin de la dérogation pour des cas d'utilisation particuliers. Cela peut être utilisé pour assouplir le réglage pour un texte spécifique ou pour désactiver le réglage en le réglant à 100% .
Pour les langues qui utilisent différents sous-ensembles Unicode, par exemple, les secours doivent être mis à l'échelle en conséquence, car la mise à l'échelle est basée sur la fréquence des caractères dans le langage écrit.
Une pile de polices de secours peut être générée pour un sous-ensemble pris en charge en spécifiant subset en option:
const { fontFamily , fontFaces } = createFontStack ( [ lobster , arial ] , {
subset : 'thai' ,
} ) ; Conseil
Besoin de prise en charge d'un sous-ensemble Unicode différent? Créez un problème ou suivez les étapes décrites dans le script generate-weightings et ouvrez un PR.
Renvoie toutes les informations nécessaires pour créer des styles de finition principaux pour une taille de police spécifique compte tenu des mesures de police fournies. Ceci est utile pour les intégrations avec différentes solutions de style.
Accepte les mêmes options que CreatestyLeObject et CreateStyLestring.
import { precomputeValues } from '@capsizecss/core' ;
import arialMetrics from '@capsizecss/metrics/arial' ;
const capsizeValues = precomputeValues ( {
fontSize : 16 ,
leading : 24 ,
fontMetrics : arialMetrics ,
} ) ;
// => {
// fontSize: string,
// lineHeight: string,
// capHeightTrim: string,
// baselineTrim: string,
//}Renvoyez la hauteur du capuchon rendu pour une taille de police spécifique compte tenu des mesures de police fournies.
import { getCapHeight } from '@capsizecss/core' ;
import arialMetrics from '@capsizecss/metrics/arial' ;
const actualCapHeight = getCapHeight ( {
fontSize : 24 ,
fontMetrics : arialMetrics ,
} ) ;
// => number Pour faciliter la récupération des métriques de police, SALIZE fournit le package @capsizecss/metrics contenant toutes les données requises pour les polices système et Google.
npm install @capsizecss/metricsVoir le package pour la documentation.
Si vous utilisez une police personnalisée ou non incluse dans le package @capsizecss/metrics , SACSIZE fournit le package @capsizecss/unpack pour extraire les données requises via une URL ou à partir d'un fichier local.
npm install @capsizecss/unpackVoir le package pour la documentation.
Mit.
