The Physical Requirement of a Digital Tool

Most web applications live entirely in the digital realm. However, “Mushi-Labe” must bridge the gap between bits and atoms. The ultimate goal for an insect collector is a physical specimen label—usually no larger than 10mm x 15mm—pinned beneath the insect. Generating these labels with precise dimensions is a fascinating challenge in web development.

Precision Layout with CSS Print Media

Standard web design focuses on responsive layouts that adapt to screens. In contrast, label generation requires absolute units like mm or pt. We utilize CSS Grid and @media print to ensure that what the user sees on the screen translates perfectly to the printer.

/* CSS for Specimen Labels */
.label-container {
    display: grid;
    grid-template-columns: repeat(5, 15mm);
    gap: 2mm;
}

.specimen-label {
    width: 15mm;
    min-height: 10mm;
    font-size: 5pt; /* Tiny but legible font */
    line-height: 1.1;
    border: 0.1pt solid #ccc; /* Cutting guides */
    padding: 1mm;
    overflow: hidden;
}

@media print {
    body { margin: 0; }
    .no-print { display: none; }
}

Dynamic Data Injection

Each label must contain specific information: Country, Prefecture, Location, Date, Elevation, and the Collector’s name. Using CodeIgniter’s View components, we can dynamically generate a sheet of hundreds of labels in a single click, significantly reducing the manual labor involved in curation.

User Experience: The “Print Preview” Challenge

Since specimen labels are so small, the UX must provide a way for users to select exactly which specimens they want to print for. Implementing a “Print Cart” or selection toggle allows users to curate their printing tasks, saving expensive label paper and ink.

Conclusion

Designing for print in a web-first world requires a shift in perspective. By mastering CSS absolute units and print-specific media queries, we can create tools that result in beautiful, physically tangible artifacts that will last for decades in a museum drawer.