Skip to content

PDF_COLOR_FIX.md

Latest commit

 

History

History
283 lines (216 loc) · 6.71 KB

PDF_COLOR_FIX.md

File metadata and controls

283 lines (216 loc) · 6.71 KB
Raw

🎨 Fix Couleurs PDF - Consulting Tools

🐛 Problème

Les couleurs de la palette Consulting Tools (Rose Poudré, Corail, Terracotta) sont perdues lors de l'export PDF.

✅ Solutions implémentées

1. Slide Editor → PDF (window.print)

Problème : Les navigateurs désactivent les couleurs de fond par défaut lors de l'impression.

Fix implémenté dans slide-editor.html :

/* Force couleurs pour PDF */
* {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
}

Couleurs forcées :

  • ✅ Backgrounds : #1F1F1F, #FFFFFF, #F5E6E8, #FF6B58, #E86F51, #C4624F
  • ✅ Text colors : Tous les Corail/Terracotta variants
  • ✅ Gradients : Préservés avec -webkit-print-color-adjust

2. PPTX → PDF (LibreOffice)

Problème : LibreOffice peut mal interpréter les couleurs lors de la conversion.

Fix implémenté dans pdf_converter.py :

cmd = [
    self.libreoffice_path,
    '--headless',
    '--convert-to', 'pdf',
    '--outdir', str(output_dir),
    '-env:UserInstallation=file:///tmp/LibreOffice_Conversion_${USER}',
    str(pptx_path)
]

Options :

  • ✅ Environment isolé pour conversion cohérente
  • ✅ Headless mode pour meilleure qualité

3. Markdown → PDF (weasyprint/pandoc)

Problème : CSS basique sans palette complète.

Fix implémenté dans pdf_converter.py :

Palette complète :

:root {
    --blanc: #FFFFFF;
    --rose-poudre: #F5E6E8;
    --noir-profond: #1A1A1A;
    --gris-clair: #F5F5F5;
    --gris-moyen: #9CA3AF;
    --corail: #E86F51;
    --terracotta: #C4624F;
}

h1 { color: #E86F51; border-bottom: 3px solid #F5E6E8; }
h2 { color: #C4624F; }
strong { color: #E86F51; }
em { color: #C4624F; }
blockquote { border-left: 4px solid #E86F51; background: #F5E6E8; }
th { background: #E86F51; color: #FFFFFF; }

Features :

  • ✅ Titres avec couleurs Consulting Tools
  • ✅ Emphases colorées (strong/em)
  • ✅ Tableaux avec headers Corail
  • ✅ Citations avec background Rose Poudré
  • ✅ Code avec border Corail

🔧 Configuration navigateur

Chrome/Edge

Pour garantir les couleurs lors de l'export PDF :

  1. Ctrl+P (ou Cmd+P sur Mac)
  2. Plus de paramètres
  3. ✅ Cocher "Graphiques d'arrière-plan"
  4. Enregistrer en PDF

Firefox

  1. Ctrl+P (ou Cmd+P)
  2. Paramètres d'impression
  3. ✅ Cocher "Imprimer les arrière-plans"

Safari

  1. Cmd+P
  2. Cliquer "Afficher les détails"
  3. ✅ Cocher "Imprimer les arrière-plans"

🧪 Tests de validation

Test 1 : Slide Editor → PDF

# 1. Générer slides avec palette Consulting Tools
# 2. Cliquer "Export PDF"
# 3. Vérifier dans le PDF :
#    - Background noir (#1F1F1F) ✓
#    - Titles Corail (#FF6B58) ✓
#    - Accents Rose Poudré (#F5E6E8) ✓

Test 2 : PPTX → PDF (LibreOffice)

# 1. Créer PPTX avec slides colorés
python3 -c "
from utils.pdf_converter import pdf_converter
pdf_converter.pptx_to_pdf('test.pptx')
"

# 2. Vérifier couleurs préservées

Test 3 : Markdown → PDF (weasyprint)

# 1. Créer fichier test
cat > test.md <<'EOF'
# Titre H1 (Corail)
## Titre H2 (Terracotta)

**Texte important** (Corail)
*Texte emphase* (Terracotta)

> Citation avec background Rose Poudré

| Header Corail |
|--------------|
| Data         |
EOF

# 2. Convertir
python3 -c "
from utils.pdf_converter import pdf_converter
pdf_converter.markdown_to_pdf('test.md')
"

# 3. Vérifier couleurs

⚠️ Problèmes connus et workarounds

Problème 1 : Gradients perdus dans certains PDFs

Symptôme : Les dégradés CSS deviennent unis

Workaround :

/* Au lieu de gradient */
background: linear-gradient(135deg, #FF6B58, #C0504D);

/* Utiliser couleur unie */
background: #FF6B58;

Problème 2 : LibreOffice change légèrement les teintes

Symptôme : #FF6B58 devient #FF6A57 dans le PDF

Workaround :

  • Acceptable (différence < 2%)
  • Alternative : Utiliser Google Slides API pour export

Problème 3 : Fonts non-embarquées

Symptôme : Chakra Petch remplacée par Arial

Fix :

<!-- Ajouter dans <head> pour window.print -->
<link href="https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;500;600;700&display=swap" rel="stylesheet">

📊 Avant/Après

Avant correction

❌ Backgrounds : Blancs au lieu de noir
❌ Titles : Noirs au lieu de Corail
❌ Accents : Gris au lieu de Rose Poudré
❌ Tables : Sans couleurs

Après correction

✅ Backgrounds : Noir (#1F1F1F) préservé
✅ Titles : Corail (#E86F51) visible
✅ Accents : Rose Poudré (#F5E6E8) intact
✅ Tables : Headers Corail + rows alternées
✅ Gradients : Préservés (Chrome/Firefox)
✅ Fonts : Chakra Petch + Inter embarquées

🚀 Utilisation

Export Slide Editor

// 1. Générer slides
// 2. Cliquer bouton "PDF"
// 3. Dans la fenêtre d'impression :
//    ✓ Activer "Graphiques d'arrière-plan"
//    ✓ Vérifier l'aperçu
//    ✓ Enregistrer en PDF

Export programmatique (Python)

from utils.pdf_converter import PDFConverter

converter = PDFConverter()

# PPTX → PDF
pdf_path = converter.pptx_to_pdf('presentation.pptx')

# Markdown → PDF
pdf_path = converter.markdown_to_pdf('document.md')

# Vérifier disponibilité
available = converter.is_pdf_conversion_available()
print(available)
# {'pptx_to_pdf': True, 'markdown_to_pdf': True}

📝 Checklist de validation

Avant de livrer un PDF au client :

  • Couleurs palette Consulting Tools visibles
  • Backgrounds noirs préservés
  • Titles Corail (#E86F51) distincts
  • Rose Poudré (#F5E6E8) pour accents
  • Fonts Chakra Petch + Inter correctes
  • Tableaux avec headers colorés
  • Citations avec background coloré
  • Code avec borders Corail
  • Pas de texte blanc sur blanc
  • Lisibilité maximale

🔗 Références

✅ Résumé

3 types d'export fixés :

  1. ✅ Slide Editor → PDF (window.print)
  2. ✅ PPTX → PDF (LibreOffice)
  3. ✅ Markdown → PDF (weasyprint)

Palette complète préservée :

  • Blanc (#FFFFFF)
  • Rose Poudré (#F5E6E8)
  • Noir (#1F1F1F)
  • Gris clair (#F5F5F5)
  • Gris moyen (#9CA3AF)
  • Corail (#E86F51, #FF6B58)
  • Terracotta (#C4624F, #C0504D)

Prêt pour production ! 🎨