Intro

These two days i've been working on a discord-robots project and implemented a new feature - generating excerpt card.

You just need to input instructions according to the requirements and then the robot will generate beautiful card for you.

Everything works fine until I try to generate a card with Chinese characters. The result shows up at the beginning of the post.

Debugging

The whole process just likes image above. I started debugging the issue and suspected that Jinja was rendering the HTML with an encoding error firstly. So I dumped the rendered string to a file. After reviewing the HTML string, it seems that the characters aren't garbled.

So there must be something wrong with html-to-image service or sending image to discord.

def html2img_with_selector(html_str:str, id_selector:str) -> Path:
    chrome_options = webdriver.FirefoxOptions()
    ...
    driver = webdriver.Firefox(service=service, options=chrome_options)
    screen_shoot_path = work_dir.joinpath(f'{file_name}.png')
    try:
        ...
        driver.get(f"file://{file_path}")
        ...
        element = driver.find_element(By.ID, id_selector)
        element.screenshot(screen_shoot_path.name)
        ...
    except Exception as e:
        print(f"Screenshot failed: {e}")
        return
    finally:
        driver.quit()

I tested this function with the same HTML file in Docker and on my local machine. The image in the former raised a garbled text issue, but the latter worked fine. So I concluded that there must be a variable between the two that I hadn’t noticed.

So what's the differences ? English characters and Chineses characters ? A sudden flash of inspiration, How to make Chinese characters display properly on Chromium. All of these issues due to font weren't installed. After i installed the specified fonts, everything works well again.

Conclusion

Even though the final result showed no issues with the code, it was still an interesting experience for me. To ensure your program works as excepted, you need to check not only your code but also the surrounding environments. Anything is possible.