WYSIWYG Quick Reference — Do's and Don'ts

CKEditor 5 + AZ Bootstrap v2.0.27 [3][4]

Print this page to PDF: File → Print → Save as PDF

Allowed HTML Tags

Allowed Attributes

Available Colors

Spacing Classes

Pattern: {m or p}{t/b/l/r/x/y}-{breakpoint}-{0-10}

Examples: mt-3 pb-5 px-md-4 my-lg-5 [1]

Responsive Breakpoints

Common Show/Hide Patterns

Typography, Layout & Components

TEST 1a: Heading 1

TEST 1b: Heading 2

TEST 1c: Heading 3

TEST 1d: Heading 4

TEST 1e: Heading 5

TEST 1f: Heading 6

TEST 2a: Bold (strong)

TEST 2b: Bold (b tag)

TEST 2c: Italic (em)

TEST 2d: Italic (i tag)

TEST 2e: Strikethrough (s)

TEST 2f: Strikethrough (del)

TEST 2g: Underline

^{TEST 2h: Superscript}

_{TEST 2i: Subscript}

TEST 2j: Inline code

TEST 2k: Mark/highlight

TEST 2l: Small text

TEST 3a: Basic link

TEST 3b: Link with target blank

TEST 3c: Link styled as button

TEST 3d: Link styled as blue button

TEST 3e: Outline button

• TEST 4a: Unordered list item 1
• TEST 4a: Unordered list item 2
• TEST 4a: Unordered list item 3

1. TEST 4b: Ordered list item 1
2. TEST 4b: Ordered list item 2
3. TEST 4b: Ordered list item 3

• TEST 4c: Nested list parent
  • TEST 4c: Nested child 1
  • TEST 4c: Nested child 2

TEST 5a: Center aligned text

TEST 5b: Right aligned text

TEST 5c: Justified text

TEST 5d: Left aligned text

TEST 6a: text-white (on dark bg so visible)

TEST 6b: text-red

TEST 6c: text-blue

TEST 6d: text-sky

TEST 6e: text-azurite

TEST 6f: text-muted

TEST 6g: text-success

TEST 6h: text-warning

TEST 6i: text-danger

TEST 6j: text-info

TEST 7a: margin-top 1

TEST 7b: margin-top 3

TEST 7c: margin-bottom 3

TEST 7d: padding-top 3

TEST 7e: padding-bottom 3

TEST 7f: padding left-right 3

TEST 7g: padding top-bottom 3

TEST 8a: Inline style color red

TEST 8b: Inline style font-size 24px

TEST 8c: Inline style background yellow

TEST 8d: Multiple inline styles

TEST 8e: Paragraph with border and padding

TEST 9d: Section tagTEST 9e: Article tag

TEST 12a: Blockquote text

TEST 12b: Preformatted text

TEST 12c: Code block 

TEST 13: Text above hr

TEST 13: Text below hr

TEST 14: Definition Term

TEST 14: Definition Description

TEST 16a: Badge primary

TEST 16b: Badge secondary

TEST 16c: Badge success

TEST 16d: Badge danger

TEST 19a: Paragraph with data attribute

TEST 19c: Paragraph with role attribute

TEST 20a: display none (should be invisible)

TEST 20b: display block

TEST 20c: display inline

TEST 20d: span forced to block 

TEST 21a: font-weight-bold class

TEST 21b: font-weight-light class

TEST 21c: font-italic class

TEST 21d: text-uppercase class

TEST 21e: TEXT-LOWERCASE CLASS

TEST 21f: text-capitalize class

TEST 22a: Lead paragraph (larger text)

TEST 22b: Display-4 heading style

TEST 23a: bg-red

TEST 23b: bg-blue

TEST 23c: bg-sky

TEST 23d: bg-azurite

TEST 23e: bg-light

TEST 23f: bg-dark

TEST 24a: border class

TEST 24b: border-red

TEST 24c: rounded border

TEST 24d: pill border

TEST 25: Responsive Breakpoint Tests (Full Width)

Resize your browser window. The colored bars below should appear/disappear at different widths AND span the full browser width.

Three methods are tested: Method A uses the viewport width calc trick, Method B uses your site's CSS variables, Method C uses container-fluid class.

Method A: Viewport Calc (100vw + negative margin)

Method B: Site CSS Variables (--full-width-left-distance)

Method C: Bootstrap container-fluid

TEST 26: Breakpoint Quick Reference

TEST 27: Responsive Grid Test

TEST 28: Responsive Text Alignment

TEST 28a: Centered on mobile, left-aligned on md+

TEST 28b: Left on mobile, centered on lg+

TEST 28c: Center → Left at sm → Right at lg

TEST 29: Responsive Spacing

TEST 30: Responsive Flex Direction

TEST 31: Which Full-Width Method Works?

Results Checklist

After saving, compare this checklist to what appears on the page:

• Tests 1a-1f: Which heading levels survived?
• Tests 2a-2l: Which inline formatting tags survived?
• Tests 3a-3e: Did link attributes and button classes survive?
• Tests 4a-4c: Did list nesting work?
• Tests 5a-5d: Did text alignment classes work?
• Tests 6a-6j: Which AZ Bootstrap text colors work?
• Tests 7a-7g: Did spacing utility classes survive?
• Tests 8a-8e: Did inline styles survive?
• Tests 9a-9e: Did div, section, article tags survive?
• Tests 10-11: Did tables render?
• Tests 12a-12c: Did blockquote, pre, code survive?
• Test 13: Did the horizontal rule render?
• Test 14: Did definition lists survive?
• Tests 15a-15d: Did alert boxes render with styling?
• Tests 16a-16d: Did badges render?
• Test 17: Did the two-column grid layout work?
• Test 18: Did the card component render?
• Tests 19a-19c: Did data, id, and role attributes survive?
• Tests 20a-20d: Did display utilities work?
• Tests 21a-21f: Did font utility classes work?
• Tests 22a-22b: Did lead and display text work?
• Tests 23a-23f: Did background color classes work?
• Tests 24a-24d: Did border classes work?
• Tests 25 (A/B/C): Which full-width method worked? Did colored bars span the entire browser?
• Test 26: Did the reference table render with colored cells?
• Test 27: Did the 4-column responsive grid reflow properly?
• Test 28a-28c: Did text alignment change at different breakpoints?
• Test 29a-29b: Did spacing change at different breakpoints?
• Test 30: Did flex items go from stacked to side-by-side at md?
• Test 31: Note which full-width method (A, B, or C) actually worked

ADV TEST 1: Text Shadow Effects

ADV 1a: Basic drop shadow text

ADV 1b: Red glow text (UA Brand Red)

ADV 1c: Hard offset shadow (Red text, Navy shadow)

ADV 1d: 3D stacked shadow text

ADV 1e: Outlined/stroked text (white with red outline)

ADV 1f: Neon blue glow effect

ADV TEST 2: Box Shadow Effects

ADV TEST 3: CSS Gradients

ADV 3f: Gradient text fill (may not work)

ADV TEST 4: CSS Transforms

ADV 4c: Scaled up text (1.1x)

ADV TEST 5: CSS Transitions (hover effects)

Hover over each element to test if transitions work.

ADV 5b: Hover button — scale + color change 

ADV TEST 6: Style Tag Test

.adv-test-pulse { animation: adv-pulse 2s infinite; background-color: #AB0520; color: white; padding: 20px; text-align: center; margin-bottom: 15px; } @keyframes adv-pulse { 0% { box-shadow: 0 0 0 0 rgba(171,5,32,0.7); } 70% { box-shadow: 0 0 0 15px rgba(171,5,32,0); } 100% { box-shadow: 0 0 0 0 rgba(171,5,32,0); } } .adv-test-shimmer { background: linear-gradient(90deg, #0C234B 25%, #1a3a6b 50%, #0C234B 75%); background-size: 200% 100%; animation: adv-shimmer 2s linear infinite; color: white; padding: 20px; text-align: center; margin-bottom: 15px; } @keyframes adv-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .adv-test-fade-border { border: 3px solid #AB0520; padding: 20px; margin-bottom: 15px; animation: adv-border-fade 3s ease-in-out infinite alternate; } @keyframes adv-border-fade { 0% { border-color: #AB0520; } 50% { border-color: #0C234B; } 100% { border-color: #8B0015; } } .adv-hover-grow:hover { transform: scale(1.03); box-shadow: 0 8px 25px rgba(0,0,0,0.2); } .adv-hover-grow { transition: all 0.3s ease; padding: 20px; background: #f8f8f8; border: 1px solid #ddd; margin-bottom: 15px; cursor: pointer; } 

ADV TEST 7: Advanced Border Styles

ADV TEST 8: Opacity and CSS Filters

ADV TEST 9: Advanced Flexbox

ADV TEST 10: CSS Grid Layout

ADV TEST 11: Advanced Typography

ADV 11a: Increased letter-spacing (2px) and line-height (1.8)

ADV 11b: Wide tracking uppercase

ADV 11c: Increased word-spacing (10px between these words)

ADV 11d: First-line text indent (40px). This paragraph should have its first line indented like a traditional book paragraph. The rest of the lines should wrap normally without any indentation applied.

ADV 11e: Small Caps Font Variant Text

ADV 11f: Vertical text (writing-mode)

ADV TEST 12: Positioning and Layering

ADV TEST 13: Clip-Path Shapes

ADV TEST 14: Styled Numbered Steps

ADV TEST 15: Decorative Dividers

ADV TEST 16: Inline SVG

ADV 16: SVG Box 

ADV TEST 17: Interactive Cards (inline JS hover)

Advanced Test Results Checklist

After saving, check each test:

• ADV 1a-1f: Which text-shadow effects survived?
• ADV 2a-2f: Which box-shadow effects survived?
• ADV 3a-3f: Which gradient backgrounds rendered? Did gradient text (3f) work?
• ADV 4a-4d: Did CSS transforms (rotate, skew, scale, perspective) work?
• ADV 5a-5c: Did inline JS hover events fire? Did transitions animate smoothly?
• ADV 6a-6d: Did the <style> tag survive? (This is the BIG question — if yes, animations and class-based hovers work!)
• ADV 7a-7f: Which border styles rendered? Did the circle (7e) work?
• ADV 8a-8f: Did opacity scale work? Did CSS filters (blur, grayscale, drop-shadow) survive?
• ADV 9a-9c: Did flexbox layouts with gap and flex ratios work?
• ADV 10a-10b: Did CSS Grid layout work?
• ADV 11a-11f: Which advanced typography properties survived?
• ADV 12a-12b: Did absolute positioning and z-index layering work?
• ADV 13a-13b: Did clip-path shapes render?
• ADV 14: Did the numbered step circles render correctly?
• ADV 15: Which decorative divider styles survived?
• ADV 16: Did inline SVG render?
• ADV 17a-17c: Did the hover card interactions work?

Key Questions to Answer:

1. Did the <style> tag survive? (Test 6) — If YES, we have full animation capability!
2. Did inline JS events (onmouseover/onmouseout) survive? (Tests 5, 17) — If YES, we have interactive hover effects!
3. Did inline SVG survive? (Test 16) — If YES, we can create custom graphics!
4. Which CSS properties in inline styles survived? Especially: transform, filter, clip-path, opacity, transition, box-shadow, text-shadow, gradients

WYSIWYG Capability Reference

What our CKEditor 5 + AZ Bootstrap v2.0.27 setup allows

Section 1: Allowed HTML Tags

✅ Tags That Work

❌ Tags That Get Stripped

🔄 Tags That Get Converted

Section 2: Allowed vs Stripped Attributes

Section 3: AZ Bootstrap Utility Classes

All styling must be done through classes — this is your primary styling tool

Text Colors

Works on: span, p, div, td

Background Colors

Works on: p, div, td

Spacing Classes

Pattern: {property}{sides}-{breakpoint}-{size}

Sizes: 0, 1, 2, 3, 4, 5 (and extended: 6, 7, 8, 9, 10, 20, 30) [1]

Examples:

• mt-3 — margin-top size 3 (1rem | ~16px)
• pb-5 — padding-bottom size 5 (3rem | ~48px)
• px-md-4 — padding left+right size 4, starting at md breakpoint
• my-lg-5 — margin top+bottom size 5, starting at lg breakpoint

Section 4: Typography Classes

Section 5: Text Alignment

Static Alignment

Responsive Alignment

Section 6: Responsive Display Classes

Breakpoints

Show/Hide Patterns

Live Demo — Resize Browser to Test

Section 7: Grid Layout

Basic Columns

Responsive Columns

These columns reflow at different screen sizes:

Common Grid Patterns

Section 8: Flexbox Classes

Section 9: Bootstrap Components

Alerts

Badges

badge-primary badge-secondary badge-success badge-danger

Cards

Button-Styled Links

btn btn-red btn btn-blue btn btn-outline-red

Borders

Section 10: Spacing Size Reference

Responsive example: p-2 p-md-4 p-lg-5 — padding grows at each breakpoint [6]

Section 11: Quick Rules for Editors

Section 12: Common Recipes

Recipe 1: Colored Callout Box

Recipe 2: Two-Column Layout (Stacked on Mobile)

Recipe 3: Different Content for Mobile vs Desktop

Recipe 4: Responsive Button Row

Recipe 5: Highlighted Table Row