Guide d'utilisation Annuler

Utiliser les styles de contenu courants

Rechercher

Dernière mise à jour le 28 mars 2024

Utiliser les styles de contenu courants

Une feuille de style contient les définitions de styles pour les éléments qui sont utilisés dans votre sortie PDF. Vous pouvez utiliser les exemples de feuilles de style ou en créer de nouvelles. La création d’une copie de l’exemple de feuille de style OOTB vous aide en règle générale à démarrer rapidement.

L’éditeur de styles est un éditeur WYSIWYG qui masque toutes les complexités d’un code CSS derrière l’interface utilisateur. En utilisant l’éditeur de style, vous pouvez personnaliser le style des éléments de votre choix très rapidement et en toute simplicité. Les styles sont classés dans les catégories suivantes :

Styles d’en-tête
Styles de paragraphes
Styles de caractères
Styles des liens hypertextes
Styles d’image
Styles de liste
Styles de tableaux
Styles de division
Styles de la page
Autres styles

Lorsque vous travaillez dans le cadre d’un projet, le mappage de style de la plupart des éléments DITA existe dans la feuille de style par défaut. Si vous utilisez des éléments DITA standard, vous pouvez modifier leur aspect en modifiant directement la définition du style. Ces définitions de style sont disponibles dans la catégorie Autre style.

Les sections suivantes présentent des exemples des paramètres de style les plus couramment utilisés.

Utilisation des styles de titres

Les styles de titres comprennent l’ensemble des styles de base qui sont utilisés pour les titres dans votre contenu. Par défaut, 6 styles de titre de base et un style de titre de rubrique/chapitre et de titre de l’annexe sont fournis. Dans un document structuré, H1 représente le titre de la rubrique ou du chapitre. Les titres H2 à H6 sont utilisés pour les sous-rubriques ou les différentes sections au sein d’une rubrique ou d’un chapitre. Cette hiérarchie de titres s’applique automatiquement au contenu dès que le titre correspondant est trouvé.

Création de titres personnalisés de niveau chapitre

Dans une table des matières de projet, vous utilisez des chapitres. Les styles des titres de base sont conçus pour s’appliquer aux titres de niveau chapitre sans aucune personnalisation. Cependant, si vous souhaitez utiliser des titres spécifiques pour votre contenu, vous devez les créer vous-même. Le titre h1.chapter par défaut s’applique par exemple au titre du chapitre. Si vous souhaitez que le titre du chapitre s’affiche dans un style différent, vous devez personnaliser le style h1.chapter. De même, vous pouvez créer des styles personnalisés pour les sous-titres du chapitre. Si vous souhaitez par exemple créer un style personnalisé pour tous les titres de niveau 2 et 3 dans le chapitre, vous devez créer un style h2.chapter et un style h3.chapter.

Comme la fonctionnalité de publication PDF native contient les définitions de style de base pour les styles les plus courants, même si vous supprimez un style par inadvertance, le style par défaut s’applique au contenu. Par exemple, si votre feuille de style ne contient pas de définition de style pour le niveau h2, la fonctionnalité de publication PDF native applique un style de base au contenu h2.

Dans cet exemple, nous allons créer un style de titre de chapitre de niveau 2 :

Ouvrez la feuille de style requise pour la modifier.
Dans la liste Styles, développez Styles de titres.
Cliquez avec le bouton droit sur Style de titre et choisissez Nouveau style.
Dans la boîte de dialogue Ajouter un style, gardez le nom de balise h2 et entrez chapitre dans le champ Nom de la classe.
Sélectionnez Terminé.

Création d’en-têtes de numérotation automatique

L’un des styles de sortie les plus couramment utilisés est l’en-tête de numérotation automatique. Ces en-têtes représentent le numéro de chapitre, de rubrique et de sous-rubrique. Les en-têtes de numérotation automatique diffèrent des styles de liste qui consistent en une liste d’éléments d’une rubrique auxquelles des numéros sont attribués automatiquement.

Dans cet exemple, nous allons personnaliser les titres du niveau 1 au niveau 3 afin d’utiliser la numérotation automatique dans différents formats.

Ouvrez la feuille de style requise pour la modifier.
Dans la liste Styles, développez Styles de titres.
Sélectionnez le style h1 dans la liste.

Les propriétés du style h1 s’affichent dans le panneau Propriétés avec l’aperçu.
Sélectionnez la propriété de Numérotation automatique. Les styles que vous pouvez appliquer à la liste de numérotation automatique s’affichent sous la propriété Numérotation automatique.
Définissez les propriétés suivantes :
- Style : effectuez votre choix dans un large éventail de styles de numérotation génériques ou spécifiques aux paramètres régionaux. Vous pouvez choisir des styles comme la numérotation en chiffres arabes, devanagari, géorgien, valeurs décimales, style alphabétique en minuscules, etc. Pour l’exemple actuel, sélectionnez la numérotation de style alphabétique en majuscules.
- Format : le format par défaut est défini sur <x>, dans lequel la valeur x est remplacée par le style de numérotation que vous avez sélectionné dans la propriété Style. Par exemple, si vous avez sélectionné le style décimal (1), « x » incrémente automatiquement chaque instance du style h1 et affiche les valeurs 2, 3, etc. Vous pouvez également ajouter du texte personnalisé dans le champ pour mettre en forme le style de titre. Si vous souhaitez par exemple que tous les titres h1 aient un préfixe de Chapitre, vous devez définir ce champ comme Chapitre.
- <x>.
- Insérer un caractère : si vous souhaitez ajouter un caractère spécial dans le format, cliquez sur l’icône Insérer un caractère. Sélectionnez le caractère que vous souhaitez ajouter dans le format de style et cliquez sur Insérer. Différents types de caractères spéciaux peuvent être sélectionnés dans la liste déroulante Sélectionner une catégorie.
- Commencer la numérotation à partir de : si vous souhaitez que la numérotation commence à une valeur spécifique, indiquez-la. Pour notre exemple, conservez la valeur par défaut 1.
- Retrait : si vous souhaitez appliquer un retrait au titre, vous devez définir la valeur de retrait. Pour notre exemple, définissez le retrait sur 0
- Largeur du préfixe : il s’agit de la zone occupée par le format de numérotation automatique. Il est réglé automatiquement sur une taille qui s’adapte facilement au format de style sélectionné. Si vous souhaitez augmenter la taille, vous pouvez remplacer la valeur par défaut. Lorsque vous définissez cette valeur manuellement, essayez de modifier les autres propriétés qui affectent la largeur. Modifiez par exemple la taille de la police, le format avec le préfixe (Chapitre) ou un suffixe (:), définissez la valeur maximale dans la propriété Commencer la numérotation à partir de et les différentes propriétés de police afin d’obtenir la taille optimale. Pour notre exemple, conservez la valeur par défaut.
- Espacement : spécifiez l’espacement horizontal et vertical. Pour notre exemple, conservez les valeurs par défaut.
- Appliquer la mise en forme à : les propriétés de la catégorie Numérotation automatique vous aident à définir le style de numérotation. Pour appliquer d’autres personnalisations au style de numérotation ou au contenu de votre format de titres, vous pouvez choisir Numérotation ou Paragraphe dans ce champ. Si vous choisissez Numérotation, toutes les modifications apportées aux catégories Police, Bordure, Mise en page et autres s’appliquent uniquement au style de numérotation dans l’en-tête. Toutefois, si vous choisissez Paragraphe, les modifications s’appliquent au contenu du titre et non au style de numérotation.

Utilisez les paramètres suivants pour générer une sortie illustrée dans la capture d’écran suivante :

Style d’en-tête	Propriété	Valeur
h1	Style	Décimal
	Format	Chapitre <x> :
	Largeur du préfixe	160 px
	Police > Alignement du texte	Gauche
h2	Style	Décimal
	Format	Section <x> :
	Largeur du préfixe	125 px
	Police > Alignement du texte	Gauche
h3	Style	Décimal
	Insertion d’un niveau	2
	Format	Section <2>.<x>:
	Largeur du préfixe	125 px
Style d’en-tête	Propriété	Valeur

Interface utilisateur graphique, texte, application, e-mailDescription généré automatiquement

Utilisation des styles de paragraphe

Un style de paragraphe peut être créé pour appliquer une mise en forme spéciale à un paragraphe entier. Toutefois, en utilisant la pseudo-classe, vous pouvez appliquer un style uniquement à une partie spécifique du texte. Dans l’exemple suivant, nous allons créer un style de paragraphe pour utiliser le style de lettrine.

Création du style de lettrine

Un style de lettrine est utilisé dans les magazines et les documents littéraires. Le premier caractère d’un paragraphe ou d’une section présente ainsi un style particulier. Le même effet peut être obtenu à l’aide de la fonctionnalité de publication PDF native.

Dans l’exemple suivant, nous allons créer un style de lettrine :

Ouvrez la feuille de style requise pour la modifier.
Dans la liste Styles, développez les Styles de paragraphe.
Cliquez avec le bouton droit sur le style de paragraphe et sélectionnez Nouveau style.
Dans la boîte de dialogue Ajouter un style, conservez le Nom de balise « p ». Dans le champ Pseudo-classe, sélectionnez ::first-letter.
Sélectionnez Terminé.

Un nouveau style de paragraphe nommé ::first-letter est créé et ajouté dans la liste Styles de paragraphe.
Sélectionnez ::first-letter sous le style p et définissez les propriétés suivantes :
- Police : définissez la police souhaitée pour la première lettre de votre paragraphe. Pour notre exemple, définissez la famille de polices sur cursif, l’épaisseur de police sur 500, la taille de police sur 30 pt et choisissez une couleur de police.
- Mise en page : définissez l’alignement vertical du texte autour du style de la lettrine. Pour notre exemple, nous allons définir l’alignement vertical sur Bas.

Comme la balise p est mappée avec l’élément <p> dans une rubrique, vous n’avez pas besoin d’ajouter explicitement ce style à l’aide de l’attribut de classe. Le style de lettrine s’applique automatiquement dans votre contenu lorsque l’élément <p> est utilisé. Dans la capture d’écran suivante, le titre du chapitre, la brève description et les éléments de liste de définitions n’ont pas été mis en forme avec le style de lettrine. Seul le style de paragraphe est mis en forme avec le style de lettrine :

Utilisation des styles de caractères

À l’aide des styles de caractères, vous pouvez créer des styles afin de mettre en forme des caractères ou des mots dans votre contenu. Vous pouvez par exemple créer un style de caractère pour le code en ligne ou le nom de fichier. Vous pouvez également créer un style qui utilise plusieurs formats de style sur le contenu sélectionné.

Création d’un style de caractère en ligne

La mise en forme des caractères ou des mots en ligne dans un paragraphe est un style très courant. Le processus de création d’un style en ligne implique deux tâches : premièrement, vous devez créer un style dans la feuille de style et vous devez ensuite appliquer le style dans votre contenu à l’aide de l’attribut de classe.

Dans l’exemple suivant, nous allons créer un style de caractère en ligne :

Ouvrez la feuille de style requise pour la modifier.
Dans la liste Styles, développez les Styles de caractères.
Cliquez avec le bouton droit sur le Style de caractère et sélectionnez Nouveau style.
Dans la boîte de dialogue Ajouter un style, conservez le Nom de balise span et entrez BoldItalic dans le champ Nom de la classe.
Sélectionnez Terminé.

Un nouveau code nommé de style de caractère est créé et ajouté dans la liste Styles de caractère.
Sélectionnez span.BoldItalic dans la liste Style de caractère et définissez les propriétés suivantes :
- Police : toutes les propriétés liées à la police peuvent être personnalisées dans cette section. Certaines polices sont fournies par défaut. Vous pouvez choisir la police souhaitée pour le style de caractère. Pour notre exemple, définissez la famille de polices sur Serif, puis sélectionnez Gras et Italique dans la propriété Style de police. Vous pouvez également personnaliser d’autres propriétés de police telles que l’épaisseur de police (comme gras, léger), la décoration de texte (comme le soulignement, le surlignement), la taille de police, la couleur de police, l’alignement du texte, etc.
- Disposition : vous pouvez définir les propriétés liées à la disposition telles que Hauteur et Largeur, Marge, Remplissage, Alignement, etc.
- Arrière-plan : les propriétés d’arrière-plan permettent de mettre en forme la couleur d’arrière-plan d’un style particulier. Vous pouvez définir la couleur d’arrière-plan ou l’image pour tous les styles.

Une fois que vous avez créé le style de caractère en ligne, vous devez l’appliquer dans votre contenu. Pour appliquer le style de code en ligne, accédez à la vue Source et ajoutez l’attribut de classe

dans le contenu souhaité :

class="BoldItalic"

L’exemple suivant montre le format italique gras appliqué à différents endroits dans le texte courant :

Interface utilisateur graphique, texte, application, e-mail

Personnalisation d’un style de liste

Les Styles de liste contiennent les paramètres de style par défaut pour les listes ordonnées et non ordonnées. Vous pouvez facilement personnaliser ces styles de liste pour répondre à vos besoins en matière de documentation. Dans l’exemple suivant, nous allons personnaliser le style de liste numérotée ou ordonnée :

Ouvrez la feuille de style requise pour la modifier.
Dans la liste Styles, développez les Styles de liste.
Sélectionnez le style ol dans la liste.

Les propriétés du style ol s’affichent dans le panneau Propriétés avec son Aperçu.
Sélectionnez l’option Mise en forme avancée. Un message de confirmation s’affiche.
Cliquez sur Oui dans le message de confirmation pour ouvrir les propriétés de mise en forme avancée.

Voici les propriétés disponibles par défaut :
- Niveau : par défaut, il existe 6 niveaux de listes numérotées. Le niveau que vous sélectionnez dans cette liste déroulante contrôle les changements de style sur le niveau sélectionné et tous les niveaux suivants. Par exemple, si vous sélectionnez le niveau 4, toutes les modifications de style que vous appliquez sont définies sur les niveaux 4, 5 et 6.
- Type de style de liste : vous pouvez sélectionner l’un des nombreux styles de numérotation de liste. La liste contient des styles de numérotation génériques et spécifiques aux paramètres régionaux qui sont utilisés pour créer une liste numérotée. Voici certains types de style de liste : arabe, cambodgien, devanagari, éthiopien, hangeul, hébreu, japonais, coréen, chinois simple, ourdou, etc.
- Format de numérotation : le format par défaut est défini sur <x>, dans lequel la valeur x est remplacée par le style de numérotation que vous avez sélectionné dans la propriété Type de style de liste.
- Par exemple, si vous avez sélectionné le style décimal (1), la valeur « x » incrémente automatiquement chaque instance de l’élément de liste pour les valeurs 2, 3, etc. Vous pouvez également ajouter du texte personnalisé dans le champ pour mettre en forme le style de liste. Par exemple, si vous souhaitez que tous les styles de liste de premier niveau aient un suffixe « ) », vous devez définir ce champ pour le style de liste de premier niveau sur « <x>) ».
- Insérer un caractère : si vous souhaitez ajouter un caractère spécial dans le format de numérotation, cliquez sur l’icône Insérer un caractère. Sélectionnez le caractère que vous souhaitez ajouter dans le format de style et cliquez sur Insérer. Différents types de caractères spéciaux peuvent être sélectionnés dans la liste déroulante Sélectionner une catégorie.
- Insérer un niveau : vous pouvez inclure le numéro de tout niveau précédent dans votre format de numérotation. Par exemple, si vous souhaitez inclure le format de numérotation du niveau 5 dans votre format de numérotation de niveau 6, choisissez 5 dans la liste déroulante Insérer un niveau. Notez que la liste déroulante Insérer un niveau affiche uniquement le numéro des niveaux précédents et non du niveau suivant. Par exemple, lorsque vous vous trouvez au niveau 3, la liste Insérer un niveau affiche uniquement les niveaux 1 et 2.
Vous pouvez également modifier le format de numérotation pour présenter les valeurs de liste selon vos besoins. Par exemple, lorsque vous utilisez un style de numérotation imbriqué pour le niveau 3, vous pouvez le mettre en forme comme « <2>.<x>))”. Cela affiche le numéro de liste 2, suivi d’un point, du numéro de liste 3, puis de deux parenthèses, comme 2.3)).
- Retrait : si vous souhaitez appliquer un retrait à la liste, vous devez définir la valeur Retrait. Toute modification du retrait peut être examinée dans le panneau Aperçu et ajustée.
- Largeur du préfixe : il s’agit de la zone occupée par le format de numérotation. Ce paramètre est automatiquement défini sur une taille qui s’adapte facilement au format sélectionné. Si vous souhaitez augmenter la taille, vous pouvez remplacer la valeur par défaut. Lorsque vous définissez cette valeur manuellement, essayez de modifier les autres propriétés qui affectent la largeur. Par exemple, modifiez la taille de la police, le format avec un préfixe ou un suffixe, ainsi que les différentes propriétés de police afin d’obtenir la taille optimale.
- Espacement : spécifiez l’espacement horizontal entre le format de numérotation de liste et le contenu. L’espacement vertical contrôle l’écart entre les deux éléments de liste.
La capture d’écran suivante montre la liste ordonnée personnalisée pour chaque niveau :

Utilisation du style de tableau

À l’aide des feuilles de style, vous pouvez concevoir un grand nombre de styles de tableau. À l’aide des styles de tableau, vous pouvez concevoir la mise en forme du tableau entier, d’une ligne ou d’une colonne particulière. Avec le contrôle du style au niveau de la cellule, vous pouvez créer des styles de tableau très soignés.

L’exemple suivant montre comment créer un style de tableau ainsi que les différentes options de style de tableau que vous pouvez personnaliser :

Ouvrez la feuille de style requise pour la modifier.
Dans la liste Styles, cliquez avec le bouton droit sur le style Tableau et sélectionnez Nouveau style.
Dans la boîte de dialogue Ajouter un style, conservez le Nom de balise sous forme de tableau et entrez double-border dans le champ Nom de la classe.
Sélectionnez Terminé.

Utilisation d’autres styles

Si vous utilisez du contenu structuré (DITA), vous remarquerez que presque tous les éléments DITA ont un mappage de style dans la feuille de style par défaut. Par exemple, le style d’un élément <shortdesc> est défini sous Autre style > définition de style .shortdesc. Vous pouvez facilement personnaliser n’importe lequel de ces styles. Ils s’appliquent automatiquement dans la sortie PDF générée à partir de votre contenu structuré. Cela signifie que, contrairement à d’autres styles personnalisés, il n’est pas nécessaire d’ajouter un attribut outputclass sur le contenu de ces styles.

Si vous souhaitez créer une définition de style pour un élément qui n’est pas disponible par défaut ou si vous disposez d’un élément personnalisé, vous pouvez facilement le créer dans la feuille de style. Le seul point à prendre en compte est que vous devez créer le style avec le même nom que le nom de l’élément structuré. Dans l’exemple suivant, nous allons créer le style de titre d’une nouvelle fenêtre (wintitle) :

Ouvrez la feuille de style requise pour la modifier.
Dans la liste Styles, développez Autres styles.
Cliquez avec le bouton droit sur Autre style et choisissez Nouveau style.
Dans la boîte de dialogue Ajouter un style, conservez le Nom de balise vide et entrez wintitle dans le champ Nom de la classe.
Sélectionnez Terminé.

Un nouveau style nommé .wintitle est créé et ajouté dans la liste Autres styles.
Sélectionnez .wintitle dans la liste Autres styles et définissez les propriétés selon vos besoins.

Utilisation de JavaScript pour travailler avec un contenu ou un style

La fonction Publication de sortie PDF vous permet d’exécuter JavaScript pour manipuler votre contenu ou le style appliqué au contenu avant la création du PDF final. Cette fonctionnalité vous donne un contrôle total sur la façon dont votre sortie finale est créée. Par exemple, vous pouvez vouloir ajouter des informations juridiques à la sortie du PDF, qui résident dans un autre PDF. En utilisant JavaScript, vous pouvez ajouter les informations juridiques une fois le PDF créé pour le contenu de base, mais avant la création du PDF final.

Pour prendre en charge l’exécution JavaScript, la fonction Publication de sortie PDF vous fournit les fonctions de rappel suivantes :

window.pdfLayout.onBeforeCreateTOC(callback) : cette fonction de rappel est exécutée avant la création de la table des matières.
window.pdfLayout.onBeforePagination(callback) : cette fonction de rappel est exécutée après la création de la table des matières, mais avant l’ajout de sauts de page dans le PDF.
window.pdfLayout.onAfterPagination(callback) : cette fonction de rappel est exécutée après l’ajout de la table des matières et des sauts de page dans le PDF.

Remarque :

En interne, une séquence d’exécution est conservée pour ces fonctions de rappel. Tout d’abord, la fonction onBeforeCreateTOC est exécutée, suivie de la fonction onBeforePagination et enfin la fonction onAfterPagination est exécutée.

En fonction du type de contenu ou de la modification de style que vous souhaitez effectuer, vous pouvez choisir la fonction de rappel à utiliser. Par exemple, si vous souhaitez ajouter du contenu, il est recommandé de le faire avant de générer la table des matières. De même, si vous souhaitez effectuer des mises à jour du style, celles-ci peuvent être effectuées avant ou après la pagination.

Dans l’exemple suivant, la position des titres des figures est modifiée pour apparaître en dessous des images au lieu d’au-dessus des images. Pour cela, vous devez activer l’option d’exécution JavaScript dans le paramètre prédéfini. Pour ce faire, procédez comme suit :

Ouvrez le paramètre prédéfini pour le modifier.
Accédez à l’onglet Avancé.
Sélectionnez l’option Activer JavaScript .
Enregistrez le paramètre prédéfini et fermez-le.

Ensuite, créez un fichier JavaScript avec le code suivant et enregistrez-le dans le dossier Ressources de votre modèle :

/*
*	Ce code JavaScript est utilisé pour déplacer le titre de la figure en dessous de l’image
*	*/

window.addEventListener('DOMContentLoaded', function () { window.pdfLayout.onBeforeCreateTOC(function() {
var titleNodes = document.querySelectorAll('.fig > .title') for (var i = 0; i < titleNodes.length; i++) {
var titleNode = titleNodes[i]
var figNode = titleNode.parentNode
var imageNode = figNode.querySelector('.image') if(imageNode && imageNode.parentNode !== figNode) {
 
imageNode = imageNode.parentNode
}
if (figNode && imageNode && imageNode.parentNode === figNode) { figNode.insertBefore(imageNode, titleNode)
}
}
})
});

Remarque :

La fonction window.addEventListener('DOMContentLoaded', function () doit être appelée avant l’utilisation des fonctions de rappel.

Ensuite, ce script doit être appelé à partir d’un fichier de modèle utilisé pour générer la sortie du PDF. Pour notre exemple, nous l’ajouterons au modèle de la table des matières. Assurez-vous que la balise <script> est ajoutée dans une balise <div> prédéfinie à l’intérieur de la balise <body>. Si vous l’ajoutez dans la balise <head> ou en dehors de la balise <body>, le script ne s’exécutera pas.