""" Infographic Title Generator - SVG Renderer Renders title content in SVG format with unified row/column layout """ import xml.etree.ElementTree as ET import os from typing import List, Tuple, Dict, Optional from modules.title_styler.config import ( LINE_HEIGHT_RATIO, SVG_PADDING, ALIGNMENT_LEFT, ALIGNMENT_CENTER, ALIGNMENT_RIGHT ) from modules.title_styler.font_metrics import ( get_font_metrics, measure_text_width, measure_text_bbox, ) SINGLE_WEIGHT_FONTS = {'Impact'} MEASUREMENT_FALLBACKS_WHEN_UNAVAILABLE = { 'Impact': 'Arial', 'Bebas Neue': 'Arial', 'Comic Sans MS': 'Times New Roman', 'Comic Neue': 'Times New Roman', 'Brush Script': 'Times New Roman', 'Pacifico': 'Times New Roman', } FONT_FAMILY_FALLBACKS = { 'Georgia': 'serif', 'Times': 'serif', 'Times New Roman': 'serif', 'Cambria': 'serif', 'Garamond': 'serif', 'Book Antiqua': 'serif', 'Palatino': 'serif', 'Palatino Linotype': 'serif', 'Noto Serif': 'serif', 'DejaVu Serif': 'serif', 'Arial': 'sans-serif', 'Helvetica': 'sans-serif', 'Verdana': 'sans-serif', 'Tahoma': 'sans-serif', 'Trebuchet MS': 'sans-serif', 'Segoe UI': 'sans-serif', 'Calibri': 'sans-serif', 'Roboto': 'sans-serif', 'Open Sans': 'sans-serif', 'Montserrat': 'sans-serif', 'Oswald': 'sans-serif', 'Lato': 'sans-serif', 'Source Sans Pro': 'sans-serif', 'Noto Sans': 'sans-serif', 'DejaVu Sans': 'sans-serif', 'Liberation Sans': 'sans-serif', 'Impact': 'sans-serif', 'Bebas Neue': 'sans-serif', 'Courier': 'monospace', 'Courier New': 'monospace', 'Consolas': 'monospace', 'Monaco': 'monospace', 'Menlo': 'monospace', 'DejaVu Sans Mono': 'monospace', 'Liberation Mono': 'monospace', 'Comic Sans MS': 'cursive', 'Comic Neue': 'cursive', 'Brush Script': 'cursive', 'Pacifico': 'cursive', } def _font_family_base(font_family): if not font_family: return '' return str(font_family).split(',')[0].strip().strip("'").strip('"') def _font_key(text): return ''.join(ch for ch in str(text).lower() if ch.isalnum()) def _font_family_for_measurement(font_family, font_weight, font_style): """Pick the family whose metrics best match the emitted SVG on this host. Some named display fonts are often missing on Linux servers. Fontconfig may report Noto Sans for them, while Chrome's SVG renderer falls through to the generic CSS family. In those cases, measuring the requested family makes background pills far wider than the rendered text. """ base = _font_family_base(font_family) fallback = MEASUREMENT_FALLBACKS_WHEN_UNAVAILABLE.get(base) if not fallback: return font_family resolved_path = get_font_metrics()._fc_match(base, font_weight, font_style) if resolved_path and _font_key(base) in _font_key(os.path.basename(resolved_path)): return font_family return fallback def _normalize_weight_for_output(font_family, font_weight): """Some display fonts (Impact) ship only a Regular face; emitting font-weight=bold causes browsers/Cairo to synthesise fake bold (visibly thicker than intended). Strip the weight for those fonts so the rasterised PNG matches the original face. """ base = _font_family_base(font_family) if base in SINGLE_WEIGHT_FONTS: return 'normal' return font_weight def _font_family_for_output(font_family): """Emit an explicit generic fallback so Chrome and PIL land in the same font category when a named family (notably Impact) is unavailable. """ if not font_family: return 'Arial, sans-serif' if ',' in str(font_family): return str(font_family) base = _font_family_base(font_family) fallback = FONT_FAMILY_FALLBACKS.get(base) if not fallback: return str(font_family) return f"{font_family}, {fallback}" class LayoutElement: """Represents a layout element with its bounding box""" def __init__(self, text: str, config: dict, width: float, height: float, metrics: dict = None): self.text = text self.config = config self.width = width # Total width (including background) self.height = height # Total height (including background) self.metrics = metrics or {} # Text metrics (text_width, text_height, text_ascent, text_descent) # Bounding box (will be set during layout) self.x1 = 0.0 # Left edge self.y1 = 0.0 # Top edge self.x2 = 0.0 # Right edge (x1 + width) self.y2 = 0.0 # Bottom edge (y1 + height) # Text rendering position self.text_baseline_y = 0.0 # Text baseline Y position self.text_x = 0.0 # Text X position (left edge of text, not including bg padding) self.text_anchor = 'start' # Background rect position (if has background) self.bg_rect_x = 0.0 self.bg_rect_y = 0.0 self.bg_rect_width = 0.0 self.bg_rect_height = 0.0 def set_position(self, x: float, y: float): """Set element position (x, y is top-left corner)""" self.x1 = x self.y1 = y self.x2 = x + self.width self.y2 = y + self.height class SVGRenderer: """SVG Renderer class with unified layout system""" def __init__(self): self.svg_padding = SVG_PADDING def measure_element_size(self, text: str, config: dict) -> Tuple[float, float, dict]: """ Measure actual element size including background padding Returns: (width, height, metrics) tuple metrics contains: text_width, text_height, text_ascent, text_descent """ # Apply text transform first (affects measurement) text_transform = config.get('text_transform', 'none') if text_transform == 'uppercase': text = text.upper() elif text_transform == 'lowercase': text = text.lower() elif text_transform == 'capitalize': text = text.capitalize() font_size = config.get('font_size', 48) font_family = config.get('font_family') or 'Arial' font_weight = _normalize_weight_for_output( font_family, config.get('font_weight') or 'normal', ) font_style = config.get('font_style') or 'normal' measurement_family = _font_family_for_measurement( font_family, font_weight, font_style, ) # Parse letter_spacing spacing_value = 0 ls = config.get('letter_spacing', 0) if isinstance(ls, str) and ls.endswith('em'): spacing_value = float(ls[:-2]) elif isinstance(ls, (int, float)): spacing_value = ls # Measure text bbox ascent, descent, text_width, text_height = measure_text_bbox( text, measurement_family, int(font_size), font_weight, font_style, spacing_value, ) metrics = { 'text_width': text_width, 'text_height': text_height, 'text_ascent': ascent, 'text_descent': descent } # Check if element has background padding bg_config = config.get('background', False) if bg_config and isinstance(bg_config, dict): bg_padding = bg_config.get('padding', 10) # Background expands the bounding box width = text_width + 2 * bg_padding height = text_height + 2 * bg_padding else: width = text_width height = text_height return width, height, metrics def layout_row(self, elements: List[LayoutElement], gap: float = 10.0, vertical_align: str = 'baseline') -> Tuple[float, float]: """ Layout elements horizontally (row layout) In baseline mode: text baselines align first, then backgrounds adjust around text Args: elements: List of LayoutElement objects gap: Gap between elements vertical_align: Vertical alignment ('baseline', 'center', 'start', 'end') Returns: (total_width, max_height) of the row """ if not elements: return 0.0, 0.0 current_x = 0.0 # For baseline alignment: align text baselines, then adjust backgrounds if vertical_align == 'baseline': # Find the maximum ascent and descent among all elements (text only) max_ascent = 0.0 max_descent = 0.0 for elem in elements: text_ascent = elem.metrics.get('text_ascent', elem.height * 0.75) text_descent = elem.metrics.get('text_descent', elem.height * 0.25) max_ascent = max(max_ascent, text_ascent) max_descent = max(max_descent, text_descent) # Row height is based on text metrics, but may extend for backgrounds row_content_height = max_ascent + max_descent max_top_extend = 0.0 # Maximum extension above baseline max_bottom_extend = 0.0 # Maximum extension below baseline for elem in elements: text_ascent = elem.metrics.get('text_ascent', elem.height * 0.75) text_descent = elem.metrics.get('text_descent', elem.height * 0.25) text_height = text_ascent + text_descent # Check if element has background bg_config = elem.config.get('background', False) if bg_config and isinstance(bg_config, dict): bg_padding = bg_config.get('padding', 10) # Background extends beyond text top_extend = text_ascent + bg_padding bottom_extend = text_descent + bg_padding else: # No background, just text top_extend = text_ascent bottom_extend = text_descent max_top_extend = max(max_top_extend, top_extend) max_bottom_extend = max(max_bottom_extend, bottom_extend) # Total row height includes maximum extensions max_height = max_top_extend + max_bottom_extend # Now position each element for i, elem in enumerate(elements): text_ascent = elem.metrics.get('text_ascent', elem.height * 0.75) text_descent = elem.metrics.get('text_descent', elem.height * 0.25) text_width = elem.metrics.get('text_width', elem.width) text_height = text_ascent + text_descent # Text baseline is at max_top_extend from row top # This ensures all text baselines align text_baseline_y = max_top_extend # Check if element has background bg_config = elem.config.get('background', False) if bg_config and isinstance(bg_config, dict): bg_padding = bg_config.get('padding', 10) # Text position (within the element) elem.text_x = current_x + bg_padding elem.text_baseline_y = text_baseline_y # Background rect: centered vertically around text elem.bg_rect_x = current_x elem.bg_rect_y = text_baseline_y - text_ascent - bg_padding elem.bg_rect_width = text_width + 2 * bg_padding elem.bg_rect_height = text_height + 2 * bg_padding # Element bbox is the background rect elem.set_position(current_x, elem.bg_rect_y) # Move x for next element (based on background width) current_x += elem.bg_rect_width + gap else: # No background: element bbox is just the text bbox elem.text_x = current_x elem.text_baseline_y = text_baseline_y # Element bbox elem_y1 = text_baseline_y - text_ascent elem.set_position(current_x, elem_y1) # Move x for next element (based on text width) current_x += text_width + gap # Verify gap (for debugging) if i > 0: prev_elem = elements[i - 1] actual_gap = elem.x1 - prev_elem.x2 # Gap should be exactly as specified assert abs(actual_gap - gap) < 0.01, f"Gap mismatch: expected {gap}, got {actual_gap}" else: # Other alignment modes (center, start, end) max_height = max(elem.height for elem in elements) for i, elem in enumerate(elements): # Calculate y offset based on vertical alignment if vertical_align == 'center': y_offset = (max_height - elem.height) / 2 elif vertical_align == 'start': y_offset = 0.0 elif vertical_align == 'end': y_offset = max_height - elem.height else: y_offset = 0.0 # Set position elem.set_position(current_x, y_offset) # Text position bg_config = elem.config.get('background', False) if bg_config and isinstance(bg_config, dict): bg_padding = bg_config.get('padding', 10) text_ascent = elem.metrics.get('text_ascent', elem.height * 0.75) text_height = elem.metrics.get('text_height', elem.height) elem.text_x = elem.x1 + bg_padding elem.text_baseline_y = elem.y1 + (elem.height - text_height) / 2 + text_ascent elem.bg_rect_x = elem.x1 elem.bg_rect_y = elem.y1 elem.bg_rect_width = elem.width elem.bg_rect_height = elem.height else: text_ascent = elem.metrics.get('text_ascent', elem.height * 0.75) elem.text_x = elem.x1 elem.text_baseline_y = elem.y1 + text_ascent # Verify gap if i > 0: prev_elem = elements[i - 1] actual_gap = elem.x1 - prev_elem.x2 assert abs(actual_gap - gap) < 0.01, f"Gap mismatch: expected {gap}, got {actual_gap}" # Move x for next element current_x = elem.x2 + gap # Total width is last element's x2 (no gap after last element) total_width = elements[-1].x2 return total_width, max_height def layout_column(self, elements: List[LayoutElement], gap: float = 0.0) -> Tuple[float, float]: """ Layout elements vertically (column layout) Args: elements: List of LayoutElement objects gap: Gap between elements Returns: (max_width, total_height) of the column """ if not elements: return 0.0, 0.0 current_y = 0.0 max_width = max(elem.width for elem in elements) for i, elem in enumerate(elements): # Set position: x at 0 (will be adjusted by alignment later), y from current_y elem.set_position(0, current_y) # Text baseline is at y1 + ascent (from top of bbox) font_size = elem.config.get('font_size', 48) elem.baseline_y = elem.y1 + elem.height * 0.75 # Approximate baseline position # Verify gap (for debugging) if i > 0: prev_elem = elements[i - 1] actual_gap = elem.y1 - prev_elem.y2 # Gap should be exactly as specified assert abs(actual_gap - gap) < 0.01, f"Gap mismatch: expected {gap}, got {actual_gap}" # Move y for next element: y2 + gap = next y1 current_y = elem.y2 + gap # Total height is last element's y2 (no gap after last element) total_height = elements[-1].y2 return max_width, total_height def render_svg_unified(self, lines_data: List[str], line_configs: List[dict], alignment: str, max_width: Optional[int] = None, background_color: str = '#FFFFFF') -> Tuple[str, Tuple[int, int]]: """ Unified SVG rendering with proper row/column layout Args: lines_data: Text content list line_configs: Line configuration list alignment: Alignment (left/center/right) max_width: Maximum width for text wrapping background_color: Background color Returns: (svg_string, (width, height)) """ # Check for inline groups inline_groups = [] for i, config in enumerate(line_configs): if config.get('inline_group'): group_start, group_end = config['inline_group'] if (group_start, group_end) not in inline_groups: inline_groups.append((group_start, group_end)) # Build layout structure: list of rows, each row is a list of elements rows = [] processed_indices = set() wrap_group_seq = 0 for i, (text, config) in enumerate(zip(lines_data, line_configs)): if i in processed_indices: continue inline_group = config.get('inline_group') if inline_group: # This is part of an inline group - create a row with all group elements group_start, group_end = inline_group row_elements = [] for j in range(group_start, group_end + 1): if j < len(lines_data): elem_text = lines_data[j] elem_config = line_configs[j] width, height, metrics = self.measure_element_size(elem_text, elem_config) elem = LayoutElement(elem_text, elem_config, width, height, metrics) row_elements.append(elem) processed_indices.add(j) # Check if inline row needs wrapping if max_width and row_elements: total_width = sum(elem.width for elem in row_elements) + 10.0 * (len(row_elements) - 1) content_max_width = max_width - 2 * self.svg_padding # If row exceeds max_width, check for wrappable elements if total_width > content_max_width: # Find elements without background (they should wrap) # Elements with background should NOT wrap wrappable_indices = [] for idx, elem in enumerate(row_elements): has_bg = elem.config.get('background') and isinstance(elem.config.get('background'), dict) if not has_bg: wrappable_indices.append(idx) if wrappable_indices: # For now, wrap the first wrappable element # Future: could implement more sophisticated wrapping strategy wrap_idx = wrappable_indices[0] elem_to_wrap = row_elements[wrap_idx] wrap_group_seq += 1 wrap_group_id = f"inline-{i}-{wrap_group_seq}" # Calculate line height for wrap gap font_size = elem_to_wrap.config.get('font_size', 48) line_height = elem_to_wrap.metrics.get('text_height', font_size) wrap_gap = min(line_height * 0.25, 10.0) # Split the row into multiple rows # Row 1: elements before wrap point # Row 2: wrapped element on new line # Row 3: elements after wrap point (if any) if wrap_idx > 0: # Add elements before wrap point as a row rows.append(row_elements[:wrap_idx]) # Add wrapped element as its own row with special gap wrapped_row = [row_elements[wrap_idx]] rows.append({ 'elements': wrapped_row, 'is_wrapped': True, 'wrap_gap': wrap_gap, 'wrap_group_id': wrap_group_id, }) # Add remaining elements as another row if any if wrap_idx < len(row_elements) - 1: rows.append(row_elements[wrap_idx + 1:]) else: # No wrappable elements, just add the row as-is (will overflow) rows.append(row_elements) else: # Fits within width, add as normal row rows.append(row_elements) else: # No max_width constraint, add as normal row rows.append(row_elements) else: # Single element row width, height, metrics = self.measure_element_size(text, config) # Check if element has background color - elements with background should NOT wrap has_background = config.get('background') and isinstance(config.get('background'), dict) # All elements without background should wrap when exceeding max_width # Elements with background should NOT wrap (to preserve the background box) should_wrap = not has_background and max_width if should_wrap: content_max_width = max_width - 2 * self.svg_padding if width > content_max_width: # Need to wrap text into multiple lines font_size = config.get('font_size', 48) font_weight = config.get('font_weight', 'normal') font_family = config.get('font_family', 'Arial') letter_spacing = config.get('letter_spacing', 0) wrapped_lines = self.wrap_text( text, max_width, font_size, font_weight, font_family, letter_spacing ) if len(wrapped_lines) > 1: # Create multiple rows for wrapped text # Calculate line height for wrap gap line_height = metrics.get('text_height', font_size) wrap_gap = min(line_height * 0.25, 10.0) wrap_group_seq += 1 wrap_group_id = f"line-{i}-{wrap_group_seq}" for wrap_idx, line_text in enumerate(wrapped_lines): line_width, line_height, line_metrics = self.measure_element_size(line_text, config) line_elem = LayoutElement(line_text, config, line_width, line_height, line_metrics) rows.append({ 'elements': [line_elem], 'is_wrapped': wrap_idx > 0, 'wrap_gap': wrap_gap, 'wrap_group_id': wrap_group_id, }) processed_indices.add(i) continue # No wrapping needed or wrapping not applicable elem = LayoutElement(text, config, width, height, metrics) rows.append([elem]) processed_indices.add(i) # Layout each row row_layouts = [] for row_data in rows: # Handle both list and dict (dict is for wrapped rows with metadata) if isinstance(row_data, dict): row_elements = row_data['elements'] is_wrapped = row_data.get('is_wrapped', False) wrap_gap = row_data.get('wrap_gap', 0) wrap_group_id = row_data.get('wrap_group_id') else: row_elements = row_data is_wrapped = False wrap_gap = 0 wrap_group_id = None if len(row_elements) > 1: # Row layout (inline elements) - default to baseline alignment row_width, row_height = self.layout_row(row_elements, gap=10.0, vertical_align='baseline') else: # Single element elem = row_elements[0] text_ascent = elem.metrics.get('text_ascent', elem.height * 0.75) text_descent = elem.metrics.get('text_descent', elem.height * 0.25) text_width = elem.metrics.get('text_width', elem.width) text_height = elem.metrics.get('text_height', elem.height) # Set text position bg_config = elem.config.get('background', False) if bg_config and isinstance(bg_config, dict): bg_padding = bg_config.get('padding', 10) # Text position: padding from left, baseline at ascent + padding from top elem.text_x = bg_padding elem.text_baseline_y = bg_padding + text_ascent # Background rect: wraps around text with padding elem.bg_rect_x = 0 elem.bg_rect_y = 0 elem.bg_rect_width = text_width + 2 * bg_padding elem.bg_rect_height = text_height + 2 * bg_padding # Element bbox is the background rect elem.set_position(0, 0) row_width, row_height = elem.bg_rect_width, elem.bg_rect_height else: # No background: just text elem.text_x = 0 elem.text_baseline_y = text_ascent elem.set_position(0, 0) row_width, row_height = text_width, text_height row_layouts.append({ 'elements': row_elements, 'width': row_width, 'height': row_height, 'is_wrapped': is_wrapped, 'wrap_gap': wrap_gap, 'wrap_group_id': wrap_group_id, }) # Calculate total dimensions max_content_width = max(layout['width'] for layout in row_layouts) if row_layouts else 0 # Layout rows vertically with proper gap current_y = self.svg_padding for row_idx, layout in enumerate(row_layouts): # Position row based on alignment row_x_offset = 0 if alignment == ALIGNMENT_CENTER: row_x_offset = (max_content_width - layout['width']) / 2 elif alignment == ALIGNMENT_RIGHT: row_x_offset = max_content_width - layout['width'] # Adjust all elements in this row for elem in layout['elements']: elem.x1 += self.svg_padding + row_x_offset elem.x2 += self.svg_padding + row_x_offset elem.y1 += current_y elem.y2 += current_y elem.text_x += self.svg_padding + row_x_offset elem.text_baseline_y += current_y # Adjust background rect if exists bg_config = elem.config.get('background', False) if bg_config and isinstance(bg_config, dict): elem.bg_rect_x += self.svg_padding + row_x_offset elem.bg_rect_y += current_y elif ( len(layout['elements']) == 1 and os.environ.get("TITLE_STYLER_NATIVE_TEXT_ANCHOR", "1") != "0" ): # For plain single-line rows, use SVG's native anchoring # instead of converting measured text width into a left # x-coordinate. PIL and Chrome can still disagree by a few # pixels for fallback fonts (Comic Sans -> Noto Sans, etc.); # with text-anchor="middle"/"end" that residual metric # drift no longer turns into visibly misaligned rows. if alignment == ALIGNMENT_CENTER: elem.text_x = self.svg_padding + max_content_width / 2 elem.text_anchor = 'middle' elif alignment == ALIGNMENT_RIGHT: elem.text_x = self.svg_padding + max_content_width elem.text_anchor = 'end' ''' # Print row layout info if len(layout['elements']) > 1: # Inline row (multiple elements) print(f"[Row {row_idx}] Inline layout with {len(layout['elements'])} elements:") print(f" Row bbox: y1={current_y:.1f}, y2={current_y + layout['height']:.1f}") for elem_idx, elem in enumerate(layout['elements']): bg_config = elem.config.get('background', False) if bg_config: print(f" Element {elem_idx} (with bg): bbox=({elem.x1:.1f}, {elem.y1:.1f}, {elem.x2:.1f}, {elem.y2:.1f})") print(f" bg_rect=({elem.bg_rect_x:.1f}, {elem.bg_rect_y:.1f}, w={elem.bg_rect_width:.1f}, h={elem.bg_rect_height:.1f})") print(f" text=({elem.text_x:.1f}, baseline={elem.text_baseline_y:.1f})") else: print(f" Element {elem_idx} (no bg): bbox=({elem.x1:.1f}, {elem.y1:.1f}, {elem.x2:.1f}, {elem.y2:.1f})") print(f" text=({elem.text_x:.1f}, baseline={elem.text_baseline_y:.1f})") else: # Single element row elem = layout['elements'][0] bg_config = elem.config.get('background', False) if bg_config: print(f"[Row {row_idx}] Single element (with bg):") print(f" bbox=({elem.x1:.1f}, {elem.y1:.1f}, {elem.x2:.1f}, {elem.y2:.1f})") print(f" bg_rect=({elem.bg_rect_x:.1f}, {elem.bg_rect_y:.1f}, w={elem.bg_rect_width:.1f}, h={elem.bg_rect_height:.1f})") print(f" text=({elem.text_x:.1f}, baseline={elem.text_baseline_y:.1f})") else: print(f"[Row {row_idx}] Single element (no bg):") print(f" bbox=({elem.x1:.1f}, {elem.y1:.1f}, {elem.x2:.1f}, {elem.y2:.1f})") print(f" text=({elem.text_x:.1f}, baseline={elem.text_baseline_y:.1f})") ''' # Move to next row current_y += layout['height'] # Calculate row gap if row_idx < len(row_layouts) - 1: # Not the last row next_layout = row_layouts[row_idx + 1] same_wrapped_text = ( layout.get('wrap_group_id') and layout.get('wrap_group_id') == next_layout.get('wrap_group_id') ) # Row gap must respect BOTH: # (a) the current row's own line-height (typographically 1.2-1.5 of # font_size), and # (b) the next row's ascender — when a small eyebrow (e.g. 18px) is # followed by a big headline (e.g. 32px) the next row's # ascenders must NOT visually crash into this row. # The old `min(curr_font*0.5, 15)` ignored (b) entirely and the 15px # cap throttled even single-line tall titles, leading to the # "eyebrow overlaps main title" Bug A. if layout['elements']: curr_font = layout['elements'][0].config.get('font_size', 48) else: curr_font = 16.0 if next_layout['elements']: next_font = max( (e.config.get('font_size', 48) for e in next_layout['elements']), default=curr_font, ) else: next_font = curr_font gap = max(curr_font * 0.4, next_font * 0.5, 10.0) if same_wrapped_text: # Keep wrapped lines visually compact only when the custom # wrap gap is still large enough for the rendered font. gap = max(gap, layout.get('wrap_gap', 5.0)) next_role = ( next_layout['elements'][0].config.get('role') if next_layout['elements'] else None ) if next_role == 'description': gap = max(gap, curr_font * 0.55, next_font * 0.8, 14.0) current_y += gap total_height = current_y + self.svg_padding total_width = max_content_width + 2 * self.svg_padding # Create SVG svg = ET.Element('svg') svg.set('xmlns', 'http://www.w3.org/2000/svg') svg.set('width', str(int(total_width))) svg.set('height', str(int(total_height))) svg.set('viewBox', f"0 0 {int(total_width)} {int(total_height)}") # Render all elements for layout in row_layouts: for elem in layout['elements']: self._render_element(svg, elem) # Convert to string svg_string = ET.tostring(svg, encoding='unicode', method='xml') return svg_string, (int(total_width), int(total_height)) def _render_element(self, svg_parent: ET.Element, elem: LayoutElement): """Render a single layout element to SVG""" text = elem.text config = elem.config # Get style properties font_size = config.get('font_size', 48) font_family = config.get('font_family') or 'Arial' font_weight = config.get('font_weight') or 'normal' final_color = config.get('final_color') or '#000000' # Text transform text_transform = config.get('text_transform', 'none') if text_transform == 'uppercase': text = text.upper() elif text_transform == 'lowercase': text = text.lower() elif text_transform == 'capitalize': text = text.capitalize() # Render background if exists bg_config = config.get('background', False) if bg_config and isinstance(bg_config, dict): bg_color = bg_config.get('color', '#000000') bg_radius = bg_config.get('radius', bg_config.get('border_radius', 0)) # Use pre-calculated background rect position rect_elem = ET.Element('rect') rect_elem.set('x', str(elem.bg_rect_x)) rect_elem.set('y', str(elem.bg_rect_y)) rect_elem.set('width', str(elem.bg_rect_width)) rect_elem.set('height', str(elem.bg_rect_height)) rect_elem.set('fill', bg_color) if bg_radius > 0: rect_elem.set('rx', str(bg_radius)) rect_elem.set('ry', str(bg_radius)) svg_parent.append(rect_elem) # Create text element using pre-calculated position text_elem = ET.Element('text') text_elem.set('x', str(elem.text_x)) text_elem.set('y', str(elem.text_baseline_y)) text_elem.set('font-family', _font_family_for_output(font_family)) text_elem.set('font-size', f"{font_size}px") text_elem.set('font-weight', _normalize_weight_for_output(font_family, font_weight)) text_elem.set('text-anchor', elem.text_anchor) text_elem.set('fill', final_color) # Font style font_style = config.get('font_style') if font_style and font_style != 'normal': text_elem.set('font-style', font_style) # Letter spacing letter_spacing = config.get('letter_spacing') if letter_spacing: if isinstance(letter_spacing, (int, float)) and letter_spacing != 0: text_elem.set('letter-spacing', f"{letter_spacing}em") elif isinstance(letter_spacing, str): text_elem.set('letter-spacing', letter_spacing) text_elem.text = text svg_parent.append(text_elem) def estimate_text_width(self, text, font_size, font_weight='normal', font_family='Arial', letter_spacing=0): """ Calculate text width using Pillow for precise measurement """ # Parse letter_spacing (from '0.1em' to number) spacing_value = 0 if isinstance(letter_spacing, str) and letter_spacing.endswith('em'): spacing_value = float(letter_spacing[:-2]) elif isinstance(letter_spacing, (int, float)): spacing_value = letter_spacing normalized_weight = _normalize_weight_for_output(font_family, font_weight) measurement_family = _font_family_for_measurement( font_family, normalized_weight, 'normal', ) width = measure_text_width( text, measurement_family, int(font_size), normalized_weight, spacing_value ) # Comic Sans MS tends to be wider than calculated, add safety margin if 'Comic Sans' in font_family: width *= 1.08 # Add 8% safety margin for Comic Sans return width def render_line(self, text, line_config, y_position, svg_width, alignment): """ 渲染单行文本 Returns: text_element: SVG text元素 line_height: 该行的高度 """ font_size = line_config.get('font_size', 48) # 直接使用绝对字号 # 计算x位置 if alignment == ALIGNMENT_LEFT: x_position = self.svg_padding text_anchor = 'start' elif alignment == ALIGNMENT_RIGHT: x_position = svg_width - self.svg_padding text_anchor = 'end' else: # center x_position = svg_width / 2 text_anchor = 'middle' # 文本转换 if line_config.get('text_transform') == 'uppercase': text = text.upper() elif line_config.get('text_transform') == 'lowercase': text = text.lower() elif line_config.get('text_transform') == 'capitalize': text = text.capitalize() elements = [] # 添加背景矩形 background_config = line_config.get('background', False) if background_config: bg_padding = background_config.get('padding', 10) bg_color = background_config.get('color', '#000000') bg_radius = background_config.get('radius', background_config.get('border_radius', 0)) # 测量文本实际bbox（相对于baseline） # Parse letter_spacing spacing_value = 0 ls = line_config.get('letter_spacing', 0) if isinstance(ls, str) and ls.endswith('em'): spacing_value = float(ls[:-2]) elif isinstance(ls, (int, float)): spacing_value = ls font_family = line_config.get('font_family') or 'Arial' font_weight = _normalize_weight_for_output( font_family, line_config.get('font_weight') or 'normal', ) font_style = line_config.get('font_style') or 'normal' measurement_family = _font_family_for_measurement( font_family, font_weight, font_style, ) ascent, descent, text_width, text_height = measure_text_bbox( text, measurement_family, int(font_size), font_weight, font_style, spacing_value ) # 根据对齐方式计算矩形位置 if alignment == ALIGNMENT_LEFT: rect_x = x_position - bg_padding elif alignment == ALIGNMENT_RIGHT: rect_x = x_position - text_width - bg_padding else: # center rect_x = x_position - text_width/2 - bg_padding # 矩形顶部 = baseline - ascent - padding # 矩形底部 = baseline + descent + padding rect_y = y_position - ascent - bg_padding rect_width = text_width + 2*bg_padding rect_height = text_height + 2*bg_padding # 创建矩形元素 rect_elem = ET.Element('rect') rect_elem.set('x', str(rect_x)) rect_elem.set('y', str(rect_y)) rect_elem.set('width', str(rect_width)) rect_elem.set('height', str(rect_height)) rect_elem.set('fill', bg_color) if bg_radius > 0: rect_elem.set('rx', str(bg_radius)) rect_elem.set('ry', str(bg_radius)) elements.append(rect_elem) # 添加阴影效果 shadow_config = line_config.get('shadow', False) if shadow_config: shadow_offset = shadow_config.get('offset', (3, 3)) shadow_blur = shadow_config.get('blur', 4) shadow_color = shadow_config.get('color', 'rgba(0,0,0,0.3)') shadow_elem = ET.Element('text') shadow_elem.set('x', str(x_position + shadow_offset[0])) shadow_elem.set('y', str(y_position + shadow_offset[1])) shadow_elem.set( 'font-family', _font_family_for_output(line_config.get('font_family') or 'Arial'), ) shadow_elem.set('font-size', f"{font_size}px") shadow_elem.set('font-weight', _normalize_weight_for_output( line_config.get('font_family'), line_config.get('font_weight') or 'normal', )) shadow_elem.set('text-anchor', text_anchor) shadow_elem.set('fill', shadow_color) if shadow_blur > 0: shadow_elem.set('filter', f'url(#shadow-blur-{shadow_blur})') if line_config.get('font_style'): shadow_elem.set('font-style', line_config['font_style']) if line_config.get('letter_spacing'): ls = line_config['letter_spacing'] if isinstance(ls, (int, float)) and ls != 0: shadow_elem.set('letter-spacing', f"{ls}em") elif isinstance(ls, str): shadow_elem.set('letter-spacing', ls) shadow_elem.text = text elements.append(shadow_elem) # 创建主text元素 text_elem = ET.Element('text') text_elem.set('x', str(x_position)) text_elem.set('y', str(y_position)) text_elem.set( 'font-family', _font_family_for_output(line_config.get('font_family') or 'Arial'), ) text_elem.set('font-size', f"{font_size}px") text_elem.set('font-weight', _normalize_weight_for_output( line_config.get('font_family'), line_config.get('font_weight') or 'normal', )) text_elem.set('text-anchor', text_anchor) # 空心字效果 if line_config.get('outline', False): outline_width = line_config.get('outline_width', 2) text_elem.set('fill', 'none') text_elem.set('stroke', line_config.get('final_color') or '#000000') text_elem.set('stroke-width', str(outline_width)) else: text_elem.set('fill', line_config.get('final_color') or '#000000') # 字体样式 if line_config.get('font_style'): text_elem.set('font-style', line_config['font_style']) # 字母间距 if line_config.get('letter_spacing'): ls = line_config['letter_spacing'] if isinstance(ls, (int, float)) and ls != 0: text_elem.set('letter-spacing', f"{ls}em") elif isinstance(ls, str): text_elem.set('letter-spacing', ls) # 文本装饰（下划线、删除线） decorations = [] if line_config.get('underline', False): decorations.append('underline') if line_config.get('strikethrough', False): decorations.append('line-through') if decorations: text_elem.set('text-decoration', ' '.join(decorations)) text_elem.text = text elements.append(text_elem) # 计算line_height：如果有背景，需要加上padding line_height = font_size * LINE_HEIGHT_RATIO if background_config: bg_padding = background_config.get('padding', 10) line_height = max(line_height, font_size + 2*bg_padding) return elements, line_height def wrap_text(self, text, max_width, font_size, font_weight, font_family, letter_spacing): """ 将文本分成多行以适应最大宽度。 采用「行数最少 + 行宽平衡」两步法： 1) 贪心算出在 max_width 下需要的最少行数 N； 2) 二分搜索最小的 target_width <= max_width，使得贪心仍能在 N 行内装下； 以这个 target 再做一次贪心打包，让各行宽度尽量接近，避免出现 「长 / 短 / 短」这种典型不平衡（First-Fit 贪心的经典缺陷）。 Returns: lines: 分割后的行列表 """ words = text.split() if not words: return [text] content_max = max_width - 2 * self.svg_padding if content_max <= 0: return [text] # 预测每个 word 的宽度，避免反复调用 Pillow。 word_widths = [ self.estimate_text_width(w, font_size, font_weight, font_family, letter_spacing) for w in words ] space_width = self.estimate_text_width( ' ', font_size, font_weight, font_family, letter_spacing ) def greedy_pack(target): """尝试用 First-Fit 把 words 装到行宽 <= target 的若干行。 返回 (行数, [(start_idx, end_idx_exclusive), ...])；若有单 word 超过 target 也算 1 行（与原行为一致：单词过长直接成一行）。""" n_lines = 1 cur_w = 0.0 cur_start = 0 packs = [] for i, ww in enumerate(word_widths): extra = ww if cur_w == 0 else (space_width + ww) if cur_w + extra <= target or cur_w == 0: cur_w += extra else: packs.append((cur_start, i)) n_lines += 1 cur_start = i cur_w = ww packs.append((cur_start, len(words))) return n_lines, packs # 第 1 步：用原始 max_width 下的最少行数 N。 n_lines, _ = greedy_pack(content_max) if n_lines <= 1: return [' '.join(words)] # 第 2 步：二分最小化 target_width，使贪心仍能装进 N 行。 # 下界必须能容下最长的单 word，否则会无谓增加行数。 lo = max(word_widths) hi = content_max # target 不能小于 lo，否则单词放不下 if lo >= hi: target = hi else: # 浮点二分：精度 0.5 px 足够，文本宽度本身也是近似值。 for _ in range(40): # log2(content_max / 0.5) 上限充裕 if hi - lo < 0.5: break mid = (lo + hi) / 2 fit_n, _ = greedy_pack(mid) if fit_n <= n_lines: hi = mid else: lo = mid target = hi # 第 3 步：用平衡 target 重新打包。 _, packs = greedy_pack(target) lines = [' '.join(words[s:e]) for s, e in packs] return lines if lines else [text] def calculate_svg_dimensions(self, lines_data, line_configs, alignment, max_width=None): """ 计算SVG总尺寸 Args: lines_data: 文本内容列表 line_configs: 行配置列表 alignment: 对齐方式 max_width: 最大宽度限制 Returns: (width, height): SVG尺寸 wrapped_lines: 考虑换行后的实际行数据 """ # 单列布局 max_width_content = 0 total_height = self.svg_padding wrapped_lines = [] # 存储实际渲染的行（包括换行后的） for text, config in zip(lines_data, line_configs): font_size = config.get('font_size', 48) # 处理换行 if config.get('allow_wrap') and max_width: text_lines = self.wrap_text( text, max_width, font_size, config.get('font_weight', 'normal'), config.get('font_family', 'Arial'), config.get('letter_spacing', 0) ) else: text_lines = [text] # 为每个实际行添加配置 for line_text in text_lines: text_width = self.estimate_text_width( line_text, font_size, config.get('font_weight', 'normal'), config.get('font_family', 'Arial'), config.get('letter_spacing', 0) ) max_width_content = max(max_width_content, text_width) total_height += font_size * LINE_HEIGHT_RATIO wrapped_lines.append((line_text, config)) total_height += self.svg_padding total_width = max_width_content + 2 * self.svg_padding # Add extra margin for Comic Sans fonts to prevent truncation has_comic_sans = any( config.get('font_family', '').startswith('Comic Sans') for _, config in wrapped_lines ) if has_comic_sans: total_width += 20 # Extra 20px safety margin for Comic Sans # Always use actual content width to avoid text truncation # max_width is only used to determine when to wrap text, not to limit SVG size return total_width, total_height, wrapped_lines def _calculate_element_bbox(self, element): """ Calculate bounding box for an SVG element (text, rect, or g) Returns: (min_x, min_y, max_x, max_y) or None """ tag = element.tag if tag == 'rect': # For rect: x, y, width, height are explicit # Skip background rect with percentage values width_str = element.get('width', '0') height_str = element.get('height', '0') if '%' in width_str or '%' in height_str: return None # Skip percentage-based rects (background) x = float(element.get('x', 0)) y = float(element.get('y', 0)) width = float(width_str) height = float(height_str) # Consider border-radius (rx/ry) if present - doesn't change bbox return (x, y, x + width, y + height) elif tag == 'text': # For text: need to measure text dimensions text_content = element.text or '' if not text_content: return None x = float(element.get('x', 0)) y = float(element.get('y', 0)) font_family = element.get('font-family', 'Arial') font_size = int(element.get('font-size', '16px').replace('px', '')) font_weight = element.get('font-weight', 'normal') text_anchor = element.get('text-anchor', 'start') # Parse letter-spacing from SVG element letter_spacing_str = element.get('letter-spacing', '0') letter_spacing = 0 if letter_spacing_str and letter_spacing_str != '0': if letter_spacing_str.endswith('em'): letter_spacing = float(letter_spacing_str[:-2]) # Measure text width and height (including letter-spacing) text_width = self.estimate_text_width( text_content, font_size, font_weight, font_family, letter_spacing ) # Consider stroke width for outline text stroke_width = 0 if element.get('stroke'): stroke_width_str = element.get('stroke-width', '0') try: stroke_width = float(stroke_width_str) except: stroke_width = 0 # Text height with stroke consideration text_height = font_size + stroke_width # Calculate bbox based on text-anchor if text_anchor == 'start': min_x = x - stroke_width / 2 max_x = x + text_width + stroke_width / 2 elif text_anchor == 'middle': min_x = x - text_width / 2 - stroke_width / 2 max_x = x + text_width / 2 + stroke_width / 2 elif text_anchor == 'end': min_x = x - text_width - stroke_width / 2 max_x = x + stroke_width / 2 else: min_x = x - stroke_width / 2 max_x = x + text_width + stroke_width / 2 # Y coordinates: y is baseline, text extends above # Add extra space for ascenders and stroke min_y = y - text_height - stroke_width / 2 max_y = y + stroke_width / 2 return (min_x, min_y, max_x, max_y) return None def _adjust_svg_dimensions_to_content(self, svg_element): """ Adjust SVG width/height to fit all content without clipping, ensuring uniform padding Args: svg_element: SVG root element Returns: (adjusted_width, adjusted_height) """ # Collect all bounding boxes bboxes = [] for child in svg_element: bbox = self._calculate_element_bbox(child) if bbox: bboxes.append(bbox) if not bboxes: # No content, keep original dimensions width = int(svg_element.get('width', 100)) height = int(svg_element.get('height', 100)) return (width, height) # Calculate overall bounding box of all visible content min_x = min(bbox[0] for bbox in bboxes) min_y = min(bbox[1] for bbox in bboxes) max_x = max(bbox[2] for bbox in bboxes) max_y = max(bbox[3] for bbox in bboxes) # Target padding padding = self.svg_padding # Calculate required dimensions to maintain uniform padding on all sides # Left padding: ensure min_x >= padding (shift if needed) # Right padding: ensure max_x + padding is within bounds # Top padding: ensure min_y >= padding (shift if needed) # Bottom padding: ensure max_y + padding is within bounds # Calculate content dimensions content_width = max_x - min_x content_height = max_y - min_y # Required SVG dimensions = content + padding on both sides required_width = content_width + 2 * padding required_height = content_height + 2 * padding # Get current dimensions (from initial calculation) current_width = int(svg_element.get('width', 100)) current_height = int(svg_element.get('height', 100)) # Use maximum of current and required to ensure all content fits final_width = max(current_width, int(required_width)) final_height = max(current_height, int(required_height)) # Check if content is positioned correctly (starts at padding) # If min_x or min_y is less than padding, we need to shift content or increase dimensions if min_x < padding: # Content extends beyond left padding - increase width extra_width = padding - min_x final_width += int(extra_width) if min_y < padding: # Content extends beyond top padding - increase height extra_height = padding - min_y final_height += int(extra_height) # Ensure right and bottom padding if max_x + padding > final_width: final_width = int(max_x + padding) if max_y + padding > final_height: final_height = int(max_y + padding) return (final_width, final_height) def render_svg(self, lines_data, line_configs, alignment, max_width=None, background_color='#FFFFFF', inline=False): """ 渲染完整的SVG (uses unified layout system) Args: lines_data: 文本内容列表 line_configs: 行配置列表 alignment: 对齐方式 max_width: 最大宽度限制（可选） background_color: 背景颜色 inline: If True, render segments horizontally on same line instead of stacking Returns: svg_string: SVG XML字符串 dimensions: (width, height) """ # Use unified layout system return self.render_svg_unified(lines_data, line_configs, alignment, max_width, background_color) def _render_inline_segment(self, text, line_config, y_position, x_position, alignment): """ Render a single segment for inline layout (horizontal positioning) Args: text: Text content line_config: Line configuration y_position: Y position (baseline) x_position: X position (left edge) alignment: Alignment (ignored for inline, always uses start) Returns: (elements, line_height) """ font_size = line_config['font_size'] line_height = font_size * LINE_HEIGHT_RATIO elements = [] # Add background rectangle if exists background_config = line_config.get('background', False) if background_config: bg_padding = background_config.get('padding', 10) bg_color = background_config.get('color', '#000000') bg_radius = background_config.get('radius', background_config.get('border_radius', 0)) # 测量文本实际bbox（相对于baseline） spacing_value = 0 ls = line_config.get('letter_spacing', 0) if isinstance(ls, str) and ls.endswith('em'): spacing_value = float(ls[:-2]) elif isinstance(ls, (int, float)): spacing_value = ls font_family = line_config.get('font_family') or 'Arial' font_weight = _normalize_weight_for_output( font_family, line_config.get('font_weight') or 'normal', ) font_style = line_config.get('font_style') or 'normal' measurement_family = _font_family_for_measurement( font_family, font_weight, font_style, ) ascent, descent, text_width, text_height = measure_text_bbox( text, measurement_family, int(font_size), font_weight, font_style, spacing_value ) rect_x = x_position - bg_padding rect_y = y_position - ascent - bg_padding rect_width = text_width + 2*bg_padding rect_height = text_height + 2*bg_padding rect_elem = ET.Element('rect') rect_elem.set('x', str(rect_x)) rect_elem.set('y', str(rect_y)) rect_elem.set('width', str(rect_width)) rect_elem.set('height', str(rect_height)) rect_elem.set('fill', bg_color) if bg_radius > 0: rect_elem.set('rx', str(bg_radius)) rect_elem.set('ry', str(bg_radius)) elements.append(rect_elem) # Create text element text_elem = ET.Element('text') text_elem.set('x', str(x_position)) text_elem.set('y', str(y_position)) text_elem.set( 'font-family', _font_family_for_output(line_config.get('font_family') or 'Arial'), ) text_elem.set('font-size', f"{font_size}px") text_elem.set('font-weight', _normalize_weight_for_output( line_config.get('font_family'), line_config.get('font_weight') or 'normal', )) text_elem.set('text-anchor', 'start') # Always start for inline text_elem.set('fill', line_config.get('final_color') or '#000000') # Font style (only set if not None and not 'normal') font_style = line_config.get('font_style') if font_style and font_style != 'normal': text_elem.set('font-style', font_style) # Letter spacing if line_config.get('letter_spacing'): ls = line_config['letter_spacing'] if isinstance(ls, (int, float)) and ls != 0: text_elem.set('letter-spacing', f"{ls}em") elif isinstance(ls, str): text_elem.set('letter-spacing', ls) text_elem.text = text elements.append(text_elem) # 计算line_height：如果有背景，需要加上padding line_height = font_size * LINE_HEIGHT_RATIO if background_config: bg_padding = background_config.get('padding', 10) line_height = max(line_height, font_size + 2*bg_padding) return elements, line_height