Fix bug, add webp conversion script

README.md

@@ -265,6 +265,44 @@ mtg_card_maker generate_sprite deck.yml sprite_sheet.svg \
 *Shortcuts:*
 - `gs` or `gcs` for `generate_sprite`
 
+### 🖼️ Experimental WebP Conversion
+
+**⚠️ Experimental Feature - Mac Only**
+
+The gem includes experimental support for converting SVG cards to WebP format using Chrome's headless mode. This feature is currently **Mac-only** and requires specific dependencies.
+
+**Why?:**
+It seems a lot more user-friendly for use in things like this README.md file. The file size is bigger and it can't scale so I wouldn't use this option unless something in the SVG isn't working with whatever you are trying to do. You should also report that at https://github.com/joe-sharp/mtg_card_maker/issues . Thanks in advance!
+
+**Prerequisites:**
+- **macOS**: Chrome must be installed at `/Applications/Google Chrome.app/Contents/MacOS/Google Chrome`
+- **cwebp**: Google's WebP encoder must be installed (install via Homebrew: `brew install webp`)
+
+**Usage:**
+```bash
+# Convert a single SVG card to WebP
+bin/svg_to_webp output_card.svg
+
+# Convert any SVG file to WebP
+bin/svg_to_webp path/to/your/card.svg
+```
+
+**Features:**
+- **Lossless Conversion**: High-quality WebP output with transparency support
+- **Automatic Cropping**: Removes Chrome's window chrome for clean card output
+- **Optimized Dimensions**: Outputs at 630x880 pixels (standard MTG card ratio)
+- **Transparent Background**: Preserves transparency for web and design use
+
+**Caveats:**
+- **Platform Limitation**: Currently only works on macOS with Chrome installed
+- **Dependency Required**: Requires `cwebp` command-line tool for final processing
+- **Experimental Status**: May have issues with complex SVG content or Chrome updates
+- **File Size**: WebP files may be larger than optimized SVGs for simple cards
+
+**Future Plans:**
+- Cross-platform support (Windows, Linux)
+- Integration with main CLI commands
+
 ## 🔮 Examples
 
 <p>
@@ -286,9 +324,12 @@ mtg_card_maker generate_card \
   --power=3 \
   --toughness=3 \
   --border-color=gold \
-  --color=blue
+  --color=blue \
+  --art=images/joe.webp
 ```
 
+
+
 **Add multiple cards to a YAML file:**
 ```bash
 mtg_card_maker add_card deck.yml --name="Lightning Bolt" --mana-cost="R" --type-line="Instant" --rules-text="Deal 3 damage to any target." --color="red"

bin/svg_to_webp

@@ -0,0 +1,90 @@
+#!/usr/bin/env ruby
+# frozen_string_literal: true
+
+require 'fileutils'
+require 'English'
+
+# Script to convert SVG files to WebP format
+# Uses Chrome headless mode for high-quality SVG to WebP conversion
+class OutputCardConverter
+  def initialize(input_svg)
+    @input_svg = input_svg
+    @output_webp = @input_svg.sub('.svg', '.webp')
+    @screenshot_file = 'screenshot.webp'
+  end
+
+  def convert
+    puts "🪄 Converting #{@input_svg} to WebP..."
+
+    unless File.exist?(@input_svg)
+      puts "❌ Error: #{@input_svg} not found!"
+      exit 1
+    end
+
+    convert_svg_to_webp
+    crop_and_cleanup
+    display_result
+  end
+
+  private
+
+  def convert_svg_to_webp
+    puts "Converting #{@input_svg} to WebP using Chrome..."
+
+    chrome_path = find_chrome_path
+    chrome_args = build_chrome_args
+
+    puts "Running Chrome command: #{chrome_path} #{chrome_args.join(' ')}"
+
+    execute_chrome_conversion(chrome_path, chrome_args)
+  end
+
+  def find_chrome_path
+    '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome'
+  end
+
+  def build_chrome_args
+    [
+      '--headless',
+      '--hide-scrollbars',
+      "--screenshot=#{@screenshot_file}",
+      '--screenshot-format=webp',
+      '--window-size=630,1200',
+      '--default-background-color=00000000',
+      "file://#{File.expand_path(@input_svg)}"
+    ]
+  end
+
+  def execute_chrome_conversion(chrome_path, chrome_args)
+    puts "Current working directory: #{Dir.pwd}"
+    puts "SVG file exists: #{File.exist?(@input_svg)}"
+
+    result = system(chrome_path, *chrome_args)
+    puts "Chrome command result: #{result}"
+    puts "Exit status: #{$CHILD_STATUS.exitstatus}" if $CHILD_STATUS
+  end
+
+  def crop_and_cleanup
+    if File.exist?(@screenshot_file)
+      # Crop the image to the size of the card, make white background transparent
+      system("cwebp -lossless -crop 0 0 630 880 #{@screenshot_file} -o #{@output_webp}")
+      puts "✅ Successfully created #{@output_webp} (WebP)"
+      FileUtils.rm_f(@screenshot_file)
+    else
+      puts '⚠️  Chrome conversion failed - no screenshot file found'
+      puts "Current directory contents: #{Dir.entries('.')}"
+      exit 1
+    end
+  end
+
+  def display_result
+    puts "\n✨ Conversion complete!"
+    puts "📁 Generated file: #{@output_webp}"
+    puts '📏 Dimensions: 630x880 pixels'
+    puts '🎨 Format: WebP (lossless)'
+  end
+end
+
+# Run the converter
+input_file = ARGV.first || 'output_card.svg'
+OutputCardConverter.new(input_file).convert

lib/mtg_card_maker/css_service.rb

@@ -38,6 +38,7 @@ def css_classes(embed: false)
 
           .card-flavor-text {
             font-family: serif;
+            font-style: italic;
           }
 
           .card-power-toughness {