<!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&shy;to&shy;graph
</div>
<div>
pho&shy;tog&shy;ra&shy;pher
</div>
<div>
pho&shy;to&shy;graph&shy;i&shy;cal
</div>
</body>
</html>