Say goodbye to Widows and Orphans

In typesetting, a widow is the final word of a paragraph or heading if it falls down on the next line. This is an example of bad typhography and should be corrected if possible.

Our goal with the new property is basically to put a non-breaking space between the last two words in all headings, thus in effect gluing them together and forcing them onto the next line.

Create a new class that inherits from EPiServer.Web.WebControls.Property and add the code below.

1. public class Hn : Property {
2. public string Heading {
3. get { return (string) (ViewState["Heading"] ?? "h1"); }
4. set { ViewState["Heading"] = value; }
5. }
6. protected override void Render(HtmlTextWriter output) {
7. if (InnerProperty != null) {
8. EnsurePropertyControlsCreated();
9. if (InnerProperty.Value != null) {
10. output.WriteBeginTag(Heading);
11. if (InnerProperty is EPiServer.Core.PropertyString) {
12. string value = InnerProperty.ToWebString().Trim();
13. string[] fragments = InnerProperty.ToWebString().Split(new[] { ' ' }, StringSplitOptions.RemoveEmptyEntries);
14. if (fragments.Length > 2) {
15. value = string.Empty;
16. for (int i = 0; i < fragments.Length; i++) {
17. if (i == fragments.Length - 2)
18. value += fragments[i] + "&nbsp;";
19. else
20. value += fragments[i] + " ";
21. }
22. }
23. output.Write(value.Trim());
24. } else {
25. base.RenderChildren(output);
26. }
27. output.WriteEndTag(Heading);
28. } else if (string.IsNullOrEmpty(PropertyName.Trim())) {
29. output.WriteLine("[Error: PropertyName is not set.]");
30. } else if (((PageBase)Page).CurrentPage == null) {
31. if (DisplayMissingMessage)
32. output.WriteLine("[Error: Property is contained in a page/control/template that does not have a current page.]");
33. } else if (((PageBase)Page).CurrentPage.Property[PropertyName] == null) {
34. if (DisplayMissingMessage) {
35. output.WriteLine("[Error: No property \"{0}\".]", PropertyName);
36. }
37. } else
38. output.WriteLine("[Error: Unknown error.]");
39. }
40. }
41. }

To use the control you need to have a separate string property on your template like this:

Next, add the new control to a page and enjoy your shiny new headings without any widows.

1. <Kloojed:Hn runat="server" PropertyName="Heading" />

• Posted January 16, 2009