private string GetWidth() { string width = GetAttribute("width"); CssParsedUnit parsedWidth = CssUnitParser.Parse(width); return(parsedWidth.Unit == "%" ? width : $"{parsedWidth.Value}px"); }
// https://github.com/mjmlio/mjml/blob/d4c6ea0744e05c928044108c3117c16a9c4110fe/packages/mjml-core/src/createComponent.js#L115 public virtual CssBoxModel GetBoxModel() { // LR: Default to the outmost container CssParsedUnit containerWidth = CssUnitParser.Parse(HtmlSkeleton.ContainerWidth); var paddings = GetShorthandAttributeValue("padding", "right") + GetShorthandAttributeValue("padding", "left"); var borders = GetShorthandBorderValue("right") + GetShorthandBorderValue("left"); // LR: Try and get the parents calculated Box Model size. if (HasParentComponent()) { var parent = GetParentComponent() as BodyComponent; // LR: Calculate based of the parents inner width (width after removing paddings and borders) containerWidth.Value = parent.GetContainerInnerWidth() - paddings - borders; return(new CssBoxModel( parent.GetContainerInnerWidth(), borders, paddings, containerWidth.Value )); } return(new CssBoxModel( containerWidth.Value, borders, paddings, containerWidth.Value)); }
public string GetContentWidth() { CssParsedUnit width = HasAttribute("width") ? CssUnitParser.Parse(GetAttribute("width")) : CssUnitParser.Parse($"{999999}px"); return(width.Value < GetContainerInnerWidth() ? width.ToString() : $"{GetContainerInnerWidth()}px"); }
public override CssBoxModel GetBoxModel() { // LR: Default to the outmost container CssParsedUnit containerWidth = CssUnitParser.Parse(HtmlSkeleton.ContainerWidth); // LR: Try and get the parents calculated Box Model size. if (HasParentComponent()) { var parent = GetParentComponent() as BodyComponent; // LR: Get columns in this section ParentSectionColumnCount = GetSectionColumnCount(); // LR: Parent section width var sectionWidth = parent.CssBoxModel.BoxWidth; // LR: Column has width attribute? if (HasAttribute("width")) { ContainerWidth = GetAttribute("width"); } else { ContainerWidth = $"{sectionWidth / ParentSectionColumnCount}px"; } // LR: Parse the calculated width CssParsedUnit parsedWidth = CssUnitParser.Parse(ContainerWidth); // LR: Handle Percentage values if (parsedWidth.Unit.Equals("%", StringComparison.InvariantCultureIgnoreCase)) { parsedWidth.Value = sectionWidth * parsedWidth.Value / 100; ContainerWidth = $"{parsedWidth.Value}px"; } else { ContainerWidth = $"{parsedWidth.Value}px"; } // LR: Calculated column width var columnWidth = CssUnitParser.Parse(ContainerWidth); return(new CssBoxModel( parsedWidth.Value, 0, 0, columnWidth.Value )); } return(new CssBoxModel( containerWidth.Value, 0, 0, containerWidth.Value)); }
public CssParsedUnit GetParsedWidth() { string width = string.Empty; if (HasAttribute("width")) { width = GetAttribute("width"); } else { width = $"{100 / GetSectionColumnCount()}%"; } CssParsedUnit parsedWidth = CssUnitParser.Parse(width); return(parsedWidth); }
public string CalculateAWidth(string content) { if (string.IsNullOrWhiteSpace(content)) { return(null); } CssParsedUnit parsedWidth = CssUnitParser.Parse(content); if (!parsedWidth.Unit.Equals("px")) { return(null); } var borders = CssBoxModel.BorderWidth; var innerPaddings = GetShorthandAttributeValue("inner-padding", "left") + GetShorthandAttributeValue("inner-padding", "right"); return($"{parsedWidth.Value - innerPaddings - borders}px"); }
public override CssBoxModel GetBoxModel() { // LR: Default to the outmost container CssParsedUnit containerWidth = CssUnitParser.Parse(HtmlSkeleton.ContainerWidth); // LR: Get Padding var paddings = GetShorthandAttributeValue("padding", "right") + GetShorthandAttributeValue("padding", "left"); // LR: Get Borders var borders = GetShorthandBorderValue("right") + GetShorthandBorderValue("left"); // LR: Get inner-borders float innerBorders = GetShorthandAttributeValue("inner-border", "left") + GetShorthandAttributeValue("inner-border", "right"); // LR: All padding float allPaddings = paddings + borders + innerBorders; // LR: Try and get the parents calculated Box Model size. if (HasParentComponent()) { var parent = GetParentComponent() as BodyComponent; // LR: Get columns in this section ParentSectionColumnCount = GetSectionColumnCount(); // LR: Parent section width var sectionWidth = parent.CssBoxModel.BoxWidth; // LR: Column has width attribute? if (HasAttribute("width")) { ContainerWidth = GetAttribute("width"); } else { ContainerWidth = $"{sectionWidth / ParentSectionColumnCount}px"; } // LR: Parse the calculated width CssParsedUnit parsedWidth = CssUnitParser.Parse(ContainerWidth); // LR: Handle Percentage values if (parsedWidth.Unit.Equals("%", StringComparison.InvariantCultureIgnoreCase)) { parsedWidth.Value = (sectionWidth * parsedWidth.Value / 100); ContainerWidth = $"{parsedWidth.Value - allPaddings}"; } else { ContainerWidth = $"{parsedWidth.Value - allPaddings}px"; } // LR: Calculated column width var columnWidth = CssUnitParser.Parse(ContainerWidth); return(new CssBoxModel( parsedWidth.Value, borders, paddings, columnWidth.Value )); } return(new CssBoxModel( containerWidth.Value, borders, paddings, containerWidth.Value)); }
public string RenderWithBackground(string content) { CssParsedUnit containerWidth = CssUnitParser.Parse($"{GetContainerOuterWidth()}"); bool isFullWidth = IsFullWidth(); bool isPercentage = containerWidth.Unit.Equals("%", StringComparison.InvariantCultureIgnoreCase); CssCoordinate backgroundPosition = GetBackgroundPosition(); // LR: Convert direction to Percentage X switch (backgroundPosition.X) { case "left": backgroundPosition.X = "0%"; break; case "center": backgroundPosition.X = "50%"; break; case "right": backgroundPosition.X = "100%"; break; default: if (!backgroundPosition.X.ToString().Contains("%")) { backgroundPosition.X = "50%"; } break; } // LR: Convert direction to Percentage Y switch (backgroundPosition.Y) { case "top": backgroundPosition.Y = "0%"; break; case "center": backgroundPosition.Y = "50%"; break; case "bottom": backgroundPosition.Y = "100%"; break; default: if (!backgroundPosition.Y.ToString().Contains("%")) { backgroundPosition.Y = "0%"; } break; } // LR: Calculate position to origin // X = Axis Origin, Y = Axis Position // This logic is different when using repeat or no-repeat var originX = CalculateBackgroundAxisOrigin("x", backgroundPosition); var originY = CalculateBackgroundAxisOrigin("y", backgroundPosition); Dictionary <string, string> vSizeAttributes = new Dictionary <string, string>(); // If background size is either cover or contain, we tell VML to keep the aspect // and fill the entire element. if (GetAttribute("background-size").Equals("cover", StringComparison.InvariantCultureIgnoreCase) || GetAttribute("background-size").Equals("contain", StringComparison.InvariantCultureIgnoreCase)) { vSizeAttributes = new Dictionary <string, string> { { "size", "1,1" }, { "aspect", GetAttribute("background-size").Equals("cover", StringComparison.InvariantCultureIgnoreCase) ? "atleast" : "atmost" }, }; } else if (!GetAttribute("background-size").Equals("auto", StringComparison.InvariantCultureIgnoreCase)) { string backgroundSize = GetAttribute("background-size"); var bgSplit = backgroundSize.Split(' '); if (bgSplit.Length.Equals(1)) { vSizeAttributes = new Dictionary <string, string> { { "size", GetAttribute("background-size") }, { "aspect", "atmost" }, // reproduces height auto }; } else { vSizeAttributes = new Dictionary <string, string> { { "size", backgroundSize.Replace(' ', ',') }, }; } } var vmlType = GetAttribute("background-repeat").Equals("no-repeat", StringComparison.InvariantCultureIgnoreCase) ? "frame" : "tile"; if (GetAttribute("background-size").Equals("auto", StringComparison.InvariantCultureIgnoreCase)) { vmlType = "tile"; // If no size provided, keep old behavior because outlook can't use original image size with "frame" // Also ensure that images are still cropped the same way originX = new CssCoordinate("0.5", "0.5"); originY = new CssCoordinate("0", "0"); } return($@" <!--[if mso | IE]> <v:rect {HtmlAttributes(new Dictionary<string, string> { { "style", isFullWidth ? InlineCss(new Dictionary<string, string>{ { "mso-width-percent", "1000"} }) : InlineCss(new Dictionary<string, string>{ { "width", $"{GetContainerOuterWidth()}px" } }) }, { "xmlns:v", "urn:schemas-microsoft-com:vml"}, { "fill", "true"}, { "stroke", "false"}, })}> <v:fill {HtmlAttributes(new Dictionary<string, string> { { "origin", $"{originX.X}, {originY.X}"}, { "position", $"{originX.Y}, {originY.Y}" }, { "src", GetAttribute("background-url") }, { "color", GetAttribute("background-color") }, { "type", vmlType } }.MergeLeft(vSizeAttributes))} /> <v:textbox style=""mso-fit-shape-to-text:true"" inset=""0,0,0,0""> <![endif]--> {content} <!--[if mso | IE]> </v:textbox> </v:rect> <![endif]--> "); }