Additional caption option: vertical / side-aligned text

**AI Analysis** (by Claude)

# Analysis: Additional caption option: vertical / side-aligned text

## Root Cause Analysis

This is a feature request to enhance the caption positioning system. Currently, captions are likely limited to standard horizontal positioning (below/above images). The request is for adding vertical/rotated text captions that can be positioned on the sides of images, which would provide more creative layout options for editorial and portfolio designs.

## Affected Files

Based on typical Next.js component architecture, these files would likely be involved:

```

/components/editor/

├── ImageBlock.tsx (or similar image component)

├── CaptionComponent.tsx (caption-specific component)

└── blocks/MediaBlock.tsx (if using block-based architecture)

/components/ui/

└── ToolbarControls.tsx (caption positioning controls)

/lib/

├── types/block-types.ts (caption position type definitions)

└── constants/caption-positions.ts (position constants)

/styles/

├── components/caption.css (or within Tailwind classes)

└── editor.css (editor-specific caption styles)

/hooks/

└── useBlockSettings.ts (block configuration management)

```

## Resolution Approach

### Step 1: Extend Type Definitions

```typescript

// lib/types/block-types.ts

export type CaptionPosition = 'top' | 'bottom' | 'left' | 'right' | 'left-vertical' | 'right-vertical'

export interface CaptionSettings {

position: CaptionPosition

alignment: 'start' | 'center' | 'end'

offset?: number

}

```

### Step 2: Update Caption Component

```typescript

// components/editor/CaptionComponent.tsx

const getCaptionClasses = (position: CaptionPosition) => {

switch(position) {

case 'left-vertical':

return 'absolute left-0 top-1/2 -translate-y-1/2 -rotate-90 origin-center'

case 'right-vertical':

return 'absolute right-0 top-1/2 -translate-y-1/2 rotate-90 origin-center'

case 'left':

return 'absolute left-0 top-1/2 -translate-y-1/2'

case 'right':

return 'absolute right-0 top-1/2 -translate-y-1/2'

// ... other positions

}

}

```

### Step 3: Add Toolbar Controls

```typescript

// Add to image block toolbar

const captionPositionOptions = [

{ value: 'bottom', label: 'Bottom', icon: AlignBottom },

{ value: 'top', label: 'Top', icon: AlignTop },

{ value: 'left', label: 'Left', icon: AlignLeft },

{ value: 'right', label: 'Right', icon: AlignRight },

{ value: 'left-vertical', label: 'Left Vertical', icon: RotateCcw },

{ value: 'right-vertical', label: 'Right Vertical', icon: RotateCw },

]

```

### Step 4: Update Container Layout

```typescript

// components/editor/ImageBlock.tsx

<div className={cn(

"relative inline-block",

captionPosition.includes('vertical') && "pr-8 pl-8" // Add padding for vertical captions

)}>

<img src={src} alt={alt} />

<CaptionComponent

text={caption}

position={captionPosition}

className={getCaptionPositionStyles(captionPosition)}

/>

</div>

```

### Step 5: Handle Responsive Behavior

```css

/* Responsive adjustments for vertical captions */

@media (max-width: 768px) {

.caption-vertical {

@apply rotate-0 relative mt-2;

}

}

```

### Step 6: Update Block Schema/Storage

```typescript

// Update Supabase schema or block data structure

interface ImageBlockData {

// ... existing fields

captionSettings: {

position: CaptionPosition

alignment: string

showCaption: boolean

}

}

```

## Complexity Estimate

**Medium** - Here's why:

**Moderate complexity factors:**

- Requires CSS transforms and positioning logic

- Need to handle text rotation and spacing

- Responsive behavior considerations

- UI controls need updating

- Typography considerations for vertical text readability

**Not overly complex because:**

- Uses standard CSS transforms

- Builds on existing caption system

- No complex animations required

- Straightforward UI additions

## Dependencies

### Prerequisites:

1. **Existing caption system** - Must have current caption functionality working

2. **Block-based architecture** - Need established image block component structure

3. **Toolbar system** - Requires existing toolbar/settings panel for image blocks

### Potential Blockers:

1. **Typography concerns** - Vertical text readability testing needed

2. **Mobile responsiveness** - May need fallback behavior on small screens

3. **Content overflow** - Long captions in vertical orientation need handling

4. **Accessibility** - Screen reader compatibility with rotated text

5. **Browser compatibility** - CSS transform support (generally good, but worth testing)

### Nice-to-have additions:

- Animation transitions between caption positions

- Custom rotation angles (not just 90°)

- Caption background/styling options for better readability

- Auto-positioning based on image content/composition