<!DOCTYPE html> <html> <head> <style type="text/css"> div { margin: 10px; width: 10px; font-family: monospace; hyphens: manual; } </style> </head> <!-- test some hyphenations that involve overlapping patterns --> <body lang="en-us"> <div> photo </div> <div> pho­to­graph </div> <div> pho­tog­ra­pher </div> <div> pho­to­graph­i­cal </div> </body> </html>