Building Santali ASCII & unicode Banner Generator in PHP: Ol Chiki ASCII Art Project

 

Have you ever seen those cool, giant text banners made completely out of keyboard characters? They are called ASCII art.

If you look at a computer screen up close, every letter you read is just a tiny grid of pixels colored in a specific shape. We can do the exact same thing using code. From today, we are going to cretate a simple PHP script that takes normal text (like "ᱚ, ᱛ") and transforms it into a giant, copy-pasteable text banner.

Here is the exact roadmap of how this PHP code will work, explained completely for beginners.

Phase 1: 🟢

Phase 2: 🔴

Phase 3: 🔴

Unplanned

Phase 1: Retrospective:

26th Oct, 2026

Today, we laid down the foundational template structure. Using a combination of Gemini, ChatGPT, and Copilot, we engineered a lightweight, clean PHP backend that safely processes multi-byte text arrays and spits out perfect, preformatted character matrices. The logic layer is fully locked in and stripped of bloated styling.

Now comes the true challenge: manually designing the 30-letter Ol Chiki script matrix. Because Santali characters are heavily based on natural, curved forms (like shapes of animals, tools, and land), creating recognizable 5-row high grids using only fixed-width keyboard symbols is the hardest part of this project.

---

The Big Picture: The Printing Press Analogy

Before looking at the code, let’s imagine how a traditional, old-school printing press works.

If you wanted to print the word "AB" on a poster using giant stamp blocks:

1. You wouldn't stamp the entire letter "A" and then the entire letter "B".
2. Instead, you would lay the stamp blocks side-by-side on a tray.
3. The printing press rolls ink across the first horizontal row of both letters at the exact same time.
4. Then it moves down to the second horizontal row, and so on, until it hits the bottom.

Our PHP code does the exact same thing. It builds your giant text row by row, from left to right.

Breaking Down the Code (Step-by-Step)

The script is split into three simple parts: the Font Dictionary, the Assembly Line, and the Display Box.

1. The Font Dictionary (The Stamps)

First, the code needs to know what our giant letters look like. We store this inside a PHP variable called $ascii_font. Think of this as a wooden box holding our alphabet stamps.

php

$ascii_font = [
    'A' => [
        "  /\\  ",
        " /  \\ ",
        "/ /\\ \\\\",
        "/ ____ \\\\",
        "/_/    \\_\\"
    ],
    'B' => [
        "|‾‾‾\\ ",
        "| ___/ ",
        "|‾‾‾\\ ",
        "| ___/ ",
        "|‾‾‾‾ "
    ]
];

• Why are there 5 rows? Every single letter in our dictionary must be exactly 5 rows tall. If one letter is taller or shorter than the others, our alignment will break!
• What's up with the double backslashes (\\\\)? In PHP coding, a single backslash (\) is a special "escape" character used to type hidden commands. To tell PHP "No, I literally just want to print a backslash character," we have to type it twice.

2. The Assembly Line (The Grid)

Next, the code grabs the text the user typed in, converts it to uppercase (so it matches our dictionary keys), and sets up 5 empty trays to build the final image.

php

$characters = mb_str_split($sanitized_input);
$lines = ["", "", "", "", ""];

• mb_str_split: Imagine the user types "A B". This function chops the word into individual pieces: ['A', ' ', 'B']. We use the mb_ version because characters like the overline (‾) are special "multi-byte" symbols. Normal cutting tools would break them, but this one cuts safely.
• $lines: These are our 5 empty text containers. Row 1, Row 2, Row 3, Row 4, and Row 5.

Now, the code loops through each letter you typed and glues its rows onto our trays:

php

foreach ($characters as $char) {
    $font_matrix = isset($ascii_font[$char]) ? $ascii_font[$char] : $fallback_char;
    for ($i = 0; $i < 5; $i++) {
        $lines[$i] .= $font_matrix[$i] . "  ";
    }
}

• If it processes 'A', it grabs Row 0 of 'A' and attaches it to our first empty line. Then it grabs Row 1 of 'A' and attaches it to the second line.
• When it moves to the next character, it appends it directly to the right side of what we already built.
• $fallback_char: What if the user types the letter 'Z', but we haven't drawn 'Z' in our dictionary yet? Instead of crashing, the code automatically uses a row of question marks ????? as a placeholder.

3. Delivering the Output

Finally, implode("\n", $lines) stacks our 5 completed rows on top of each other using line breaks (\n), creating the final large banner.

The HTML uses a <pre> tag (which stands for preformatted text). Standard web pages squish multiple spaces into a single space. The <pre> tag forces the browser to respect every single space and alignment exactly how the PHP script built it, keeping our art perfectly intact!

Lastly, a tiny bit of JavaScript hooks up to the "Copy Result" button. It secretly highlights the text inside that <pre> box and saves it straight to your computer's clipboard so you can paste it anywhere.

Wrap Up

By combining a organized lookup grid (the array) with a row-by-row assembly line (the loop), PHP makes it incredibly lightweight to generate complex text layouts on the fly.

 📅 Phase 2: Mapping Row 1 (The Foundational Vowel & Consonants)

Goal: Create clean, space-aligned string arrays for the first row of Ol Chiki letters: ᱚ (OO), ᱛ (Ot), ᱜ (Og), ᱝ (Ong), and ᱞ (Ol).

• Developer Notes: Alignment is everything. Every single array block must be exactly 6 characters wide, including the blank spaces, so they chain together without distortion. We hit our first roadblock with ᱞ (Ol), which resembles a traditional writing pen—balancing its loops with forward and backward slashes required doubling up code escape keys so PHP doesn't read them as system commands.

27th Oct, 2026

Today I have added some css to make it look better.

Here is the updated tool link: https://hathiyar.free.je/santali_ol_chiki_unicode_art.php

View the page source to get the code, and see the css I have used :

The HTML code provides the bare structural frame (the concrete walls, the doors, and the empty workbench). The CSS code acts as the interior designer’s blueprint—it decides the wallpaper color, sets up neat frames, paints the furniture, and arranges everything so visitors don't trip over the equipment.

The Base Studio Environment (body)

Think of this as setting up the vibe for the entire room.

• font-family: Arial, sans-serif; – Picks a clean, readable text style (handwriting).
• background: #f3f6fb; – Paints the main studio walls a soft, light-blueish white so it doesn't hurt your eyes.
• color: #243047; – Chooses a dark slate-gray ink for all regular text instead of harsh, solid black.
• margin: 0; padding: 25px 15px; – Flattens out unwanted gaps at the room edges and adds some breathing room so the furniture isn't pushed right against the wall.

📐 The Invisible Guide Rails (.container)

• max-width: 800px; margin: auto; – Imagine placing a large, invisible mat right down the center of a massive hall. It ensures that no matter how wide the room gets, the actual workstation stays perfectly centered and never stretches out so wide that it looks awkward.

🏷️ Headings & Descriptions (h1, .description)

• text-align: center; – Hangs the main sign and its subtext directly in the middle of the room.
• color: #2457a7; – Paints the main sign a deep, professional blue.
• line-height: 1.6; – Adds air between lines of text so they are easy to read and don't clump together.

📦 The Individual Workbenches (.box)

This shapes the two white sections where you input text and view the output.

• background: white; – Places a clean, stark-white desk surface on top of the light-blue floor.
• padding: 22px; – Pushes everything inside the desk slightly inward so the tools don't sit right on the edge.
• border-radius: 14px; – Sands down the sharp, pointy corners of the desk into smooth, modern curves.
• box-shadow: 0 4px 15px #0000000c; – Tucks a subtle, soft shadow underneath the workbench to make it look like it's slightly floating off the floor.

📝 The Form Tools (textarea, select, button)

These rules style the text box, dropdown menu, and buttons.

• box-sizing: border-box; width: 100%; – Ensures every tool expands to perfectly match the exact width of the workbench without accidentally leaking over the edges.
• padding: 12px; font-size: 16px; – Makes the text inputs and buttons large enough to read easily and comfortable to click or type into.
• resize: vertical; – Prevents the user from stretching the text box sideways and breaking the room layout, allowing them only to pull it down to make it taller.

⚡ The Interaction (button & button:hover)

• background: #2457a7; color: white; cursor: pointer; – Paints the "Generate" button blue with bright white text, and changes your mouse arrow into a clicking finger when you point at it.
• button:hover { background: #17417f; } – A visual feedback trick. When you hover your mouse over the button, it dips into a darker shade of blue, making it feel reactive—like a physical light switch dimming slightly when touched.

📟 The Art Monitor Screen (.output)

This is the dark box where your ASCII art is displayed.

• background: #111827; color: #a7f3d0; – Transforms this specific box into an old-school hacker screen—a pitch-black background with glowing, mint-green text.
• font-family: monospace; – Forces the screen to use a font where every single letter and space takes up the exact same width. This is crucial for ASCII art, otherwise, the lines wouldn't align, and the art would fall apart.
• white-space: pre; – Tells the browser: "Do not mess with my spaces or enters. Display them exactly as they are generated."
• overflow: auto; – If the generated art is wider than the box, it adds a tiny scrollbar rather than breaking out of the container or clipping off visually.

🚨 Specialized Utility Trims (.copy-button, .error, .help)

• .copy-button – Re-paints the copy button a distinctive green (#15803d) to stand out from the blue generate button.
• .error – Sets up an emergency zone. If things go wrong, it flashes a red warning text on a soft red background.
• .help – Shrinks the text size slightly and fades it into a muted grey so the instructional hints don't distract you from the main action.

 

  
		

          _ _ _                   _       _                         _         _             
         (_) | |                 | |     | |                       | |       | |            
__      ___| | |  _   _ _ __   __| | __ _| |_ ___   _ __   _____  _| |_    __| | __ _ _   _ 
\ \ /\ / / | | | | | | | '_ \ / _` |/ _` | __/ _ \ | '_ \ / _ \ \/ / __|  / _` |/ _` | | | |
 \ V  V /| | | | | |_| | |_) | (_| | (_| | ||  __/ | | | |  __/>  <| |_  | (_| | (_| | |_| |
  \_/\_/ |_|_|_|  \__,_| .__/ \__,_|\__,_|\__\___| |_| |_|\___/_/\_\\__|  \__,_|\__,_|\__, |
                       | |                                                             __/ |
                       |_|                                                            |___/ 

ASCII art... I'm also working on this .... bookmark this page to get more updates.