Kloojed

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:

New property on template

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

Leave a comment


Information

About

Marcus Lindblom is a Swedish professional frontend engineer with specialities like Web standards, ASP.NET, EPiServer, accessibility and long experience in developing high end websites for the public sector and commercial companies.

Copyright

Copyright © 2008 Marcus Lindblom. Powered by StormBreaker - Standards Compliant CMS. Hosted by Meridium AB.