{"componentChunkName":"component---src-templates-article-js","path":"/article/text-overview-for-beginners","result":{"data":{"contentfulArticle":{"title":"Text Overview for Beginners","image":"https://res.cloudinary.com/liquidcoder/image/upload/v1614174415/Blog/TextOverview/lbvswp10ytml413az3il.jpg","createdDate":"Wednesday, 24 February 2021","videoUrl":null,"updatedDate":"2 years ago","isNewLayout":true,"previews":{"previews":"{\n\t\"TextOverview1\": [\"https://res.cloudinary.com/liquidcoder/image/upload/v1614070336/StreamCast/Shared/grfn8p6fxdrey0t1tuef.png\"],\n\t\"TextOverviewKerning1\": [\"https://res.cloudinary.com/liquidcoder/image/upload/v1614171478/Blog/TextOverview/s2olupzxbptxkrzkzolz.gif\"],\n\t\"TextOverviewBaselineOffset\": [\"https://res.cloudinary.com/liquidcoder/image/upload/v1614171478/Blog/TextOverview/s2olupzxbptxkrzkzolz.gif\"],\n\t\"TextOverviewMinimumScaleFactor\": [\"https://res.cloudinary.com/liquidcoder/image/upload/v1614171480/Blog/TextOverview/l3ccamy3wl7trmibwlmu.gif\"],\n\t\"TextOverviewLineNumber\": [\"https://res.cloudinary.com/liquidcoder/image/upload/v1614171479/Blog/TextOverview/ugzr13kzrlkjcfls9d4d.gif\"],\n\t\"TextOverviewLineSpacing\": [\"https://res.cloudinary.com/liquidcoder/image/upload/v1614171480/Blog/TextOverview/xboo62dgzwzlholurhv2.gif\"],\n\t\"TextOverviewMultilineTextAlignment\": [\"https://res.cloudinary.com/liquidcoder/image/upload/v1614171479/Blog/TextOverview/zdx1unetm7u7hfcl1mbl.gif\"],\n\t\"TextOverviewFixedSize2\": [\"https://res.cloudinary.com/liquidcoder/image/upload/v1614171510/Blog/TextOverview/qanjrcvcjek2me8tzpao.png\"],\n\t\"TextOverviewConcatenation\": [\"https://res.cloudinary.com/liquidcoder/image/upload/v1614172390/Blog/TextOverview/sz4cjfru7xvnyfsfge49.png\"],\n\t\"TextOverviewFinalDemo\": [\"https://res.cloudinary.com/liquidcoder/image/upload/v1614171500/Blog/TextOverview/hzk7cr7hpiqabwr9m7jh.gif\"],\n\t\"TextOverviewAltInit3\": [\"https://res.cloudinary.com/liquidcoder/image/upload/v1614244374/Blog/TextOverview/plmrczlyf50qsw4udu6e.png\"]\n}"},"slug":"text-overview-for-beginners","author":{"email":"john@liquidcoder.com","name":"John"},"tags":[{"title":"Article"},{"title":"iOS App Development"},{"title":"Swift UI"}],"allChapters":null,"code":{"childMdx":{"body":"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {};\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, [\"components\"]);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-swift\"\n  }), \"// $$liquidcoderID-TextOverview1\\n// $$liquidcoderFilename-ContentView\\n\\nimport SwiftUI\\n\\nstruct ContentView: View {\\n\\n    var body: some View {\\n\\n        // highlight-start\\n        Text(\\\"Hello, world!\\\")\\n        // highlight-end\\n\\n    }\\n}\\n\\nstruct ContentView_Previews: PreviewProvider {\\n    static var previews: some View {\\n        ContentView()\\n    }\\n}\\n\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-swift\"\n  }), \"\\n// $$liquidcoderID-TextOverview2\\n\\nfunc font(_ font: Font?) -> some View\\n\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-swift\"\n  }), \"// $$liquidcoderID-TextOverview3\\n\\nextension Font {\\n\\n    /// A font with the large title text style.\\n    public static let largeTitle: Font\\n\\n    /// A font with the title text style.\\n    public static let title: Font\\n\\n    /// Create a font for second level hierarchical headings.\\n    @available(iOS 14.0, macOS 11.0, tvOS 14.0, watchOS 7.0, *)\\n    public static let title2: Font\\n\\n    /// Create a font for third level hierarchical headings.\\n    @available(iOS 14.0, macOS 11.0, tvOS 14.0, watchOS 7.0, *)\\n    public static let title3: Font\\n\\n    /// A font with the headline text style.\\n    public static let headline: Font\\n\\n    /// A font with the subheadline text style.\\n    public static let subheadline: Font\\n\\n    /// A font with the body text style.\\n    public static let body: Font\\n\\n    /// A font with the callout text style.\\n    public static let callout: Font\\n\\n    /// A font with the footnote text style.\\n    public static let footnote: Font\\n\\n    /// A font with the caption text style.\\n    public static let caption: Font\\n\\n    /// Create a font with the alternate caption text style.\\n    @available(iOS 14.0, macOS 11.0, tvOS 14.0, watchOS 7.0, *)\\n    public static let caption2: Font\\n\\n    /// Gets a system font with the given style and design.\\n    public static func system(_ style: Font.TextStyle, design: Font.Design = .default) -> Font\\n\\n        /// Adds italics to the font.\\n    public func italic() -> Font\\n\\n    /// Adjusts the font to enable all small capitals.\\n    public func smallCaps() -> Font\\n\\n    /// Adjusts the font to enable lowercase small capitals.\\n    public func lowercaseSmallCaps() -> Font\\n\\n    /// Adjusts the font to enable uppercase small capitals.\\n    public func uppercaseSmallCaps() -> Font\\n\\n    /// Adjusts the font to use monospace digits.\\n    public func monospacedDigit() -> Font\\n\\n    /// Sets the weight of the font.\\n    public func weight(_ weight: Font.Weight) -> Font\\n\\n    /// Adds bold styling to the font.\\n    public func bold() -> Font\\n\\n        public static func custom(_ name: String, size: CGFloat) -> Font\\n\\n    /// Create a custom font with the given `name` and `size` that scales\\n    /// relative to the given `textStyle`.\\n    @available(iOS 14.0, macOS 11.0, tvOS 14.0, watchOS 7.0, *)\\n    public static func custom(_ name: String, size: CGFloat, relativeTo textStyle: Font.TextStyle) -> Font\\n\\n    /// Create a custom font with the given `name` and a fixed `size` that does\\n    /// not scale with Dynamic Type.\\n    @available(iOS 14.0, macOS 11.0, tvOS 14.0, watchOS 7.0, *)\\n    public static func custom(_ name: String, fixedSize: CGFloat) -> Font\\n}\\n\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-swift\"\n  }), \"// $$liquidcoderID-TextOverviewKerning1\\n// $$liquidcoderFilename-ContentView\\n\\nimport SwiftUI\\n\\nstruct ContentView: View {\\n\\n    // highlight-start\\n    @State private var value: Double = 0\\n    // highlight-end\\n\\n    var body: some View {\\n\\n        // highlight-start\\n        VStack {\\n            Text(\\\"Hello, world!\\\")\\n                .kerning(CGFloat(value))\\n\\n            Slider(value: $value, in: 0...100, step: 0.1)\\n        }\\n        // highlight-end\\n\\n    }\\n}\\n\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-swift\"\n  }), \"// $$liquidcoderID-TextOverviewBaselineOffset\\n// $$liquidcoderFilename-ContentView\\n\\nimport SwiftUI\\n\\nstruct ContentView: View {\\n\\n    @State private var value: Double = 0\\n\\n    var body: some View {\\n\\n        VStack {\\n            Text(\\\"Hello, world!\\\")\\n                // highlight-start\\n                .baselineOffset(CGFloat(value))\\n                // highlight-end\\n                .background(Color.blue)\\n\\n            Slider(value: $value, in: 0...100, step: 0.1)\\n        }\\n    }\\n}\\n\\nstruct ContentView_Previews: PreviewProvider {\\n    static var previews: some View {\\n        ContentView()\\n    }\\n}\\n\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-swift\"\n  }), \"// $$liquidcoderID-TextOverviewTextCase\\n// $$liquidcoderFilename-ContentView\\n\\nimport SwiftUI\\n\\nstruct ContentView: View {\\n\\n    // highlight-start\\n    @State private var flag: Bool = false\\n    // highlight-end\\n\\n    var body: some View {\\n\\n        VStack {\\n            Text(\\\"Hello, world!\\\")\\n                // highlight-start\\n                .textCase( flag ? .uppercase : .lowercase)\\n                // highlight-end\\n\\n            // highlight-start\\n            Toggle(isOn: $flag, label: {\\n                Text(\\\"Change case\\\")\\n            })\\n            // highlight-end            \\n        }\\n    }\\n}\\n\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-swift\"\n  }), \"// $$liquidcoderID-TextOverviewMinimumScaleFactor\\n// $$liquidcoderFilename-ContentView\\n\\nimport SwiftUI\\n\\nstruct ContentView: View {\\n\\n    @State private var value: Double = 0    \\n\\n    var body: some View {\\n\\n        VStack {\\n            Text(\\\"A very loooooooooong text\\\")\\n                // highlight-start\\n                .minimumScaleFactor(CGFloat(value))\\n                // highlight-end\\n                .frame(width: 50, height: 30)\\n                .background(Color.yellow)\\n\\n            Text(\\\"Scale: \\\\(value)\\\")\\n\\n            Slider(value: $value, in: 0...1, step: 0.1)\\n        }\\n    }\\n}\\n\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-swift\"\n  }), \"// $$liquidcoderID-TextOverviewLineNumber\\n// $$liquidcoderFilename-ContentView\\n\\nimport SwiftUI\\n\\nstruct ContentView: View {\\n\\n    @State private var value: Double = 0\\n\\n    var body: some View {\\n\\n        VStack {\\n            Text(\\\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, \\\")\\n                // highlight-start\\n                .lineLimit(Int(value))\\n                // highlight-end\\n                .frame(width: 100)\\n                .background(Color.yellow)\\n\\n            Text(\\\"Line number: \\\\(Int(value))\\\")\\n\\n            Slider(value: $value, in: 0...10, step: 0.1)\\n        }\\n    }\\n}\\n\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-swift\"\n  }), \"// $$liquidcoderID-TextOverviewLineSpacing\\n// $$liquidcoderFilename-ContentView\\n\\nimport SwiftUI\\n\\nstruct ContentView: View {\\n\\n    @State private var value: Double = 0\\n\\n    var body: some View {\\n\\n        VStack {\\n            Text(\\\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\\\")\\n                // highlight-start\\n                .lineSpacing(CGFloat(value))\\n                // highlight-end\\n                .frame(width: 100)\\n                .background(Color.yellow)\\n\\n            Text(\\\"Line number: \\\\(Int(value))\\\")\\n\\n            Slider(value: $value, in: 0...10, step: 0.1)\\n        }\\n    }\\n}\\n\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-swift\"\n  }), \"// $$liquidcoderID-TextOverviewMultilineTextAlignment\\n// $$liquidcoderFilename-ContentView\\n\\nimport SwiftUI\\n\\nstruct ContentView: View {\\n\\n    @State private var value: Double = 0\\n\\n    // highlight-start\\n    @State private var alignment: TextAlignment = .leading\\n    // highlight-end\\n\\n    var body: some View {\\n\\n        VStack {\\n            Text(\\\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\\\")\\n                // highlight-start\\n                .multilineTextAlignment(alignment)\\n                // highlight-end\\n                .background(Color.yellow)\\n\\n            HStack(spacing: 30) {\\n                Button (action: {\\n                    alignment = .leading\\n                }, label: {\\n                    Image(systemName: \\\"text.alignleft\\\")\\n                        .resizable()\\n                        .frame(width: 30, height: 30, alignment: .center)\\n                })\\n\\n                Button (action: {\\n                    alignment = .center\\n                }, label: {\\n                    Image(systemName: \\\"text.aligncenter\\\")\\n                        .resizable()\\n                        .frame(width: 30, height: 30, alignment: .center)\\n                })\\n\\n                Button (action: {\\n                    alignment = .trailing\\n                }, label: {\\n                    Image(systemName: \\\"text.alignright\\\")\\n                        .resizable()\\n                        .frame(width: 30, height: 30, alignment: .center)\\n                })\\n            }.padding()\\n        }\\n    }\\n}\\n\")), mdx(\"div\", {\n    id: \"TextOverviewFixedSize1\",\n    className: \"code-block\"\n  }, mdx(\"div\", {\n    className: \"end-result\"\n  }, mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"https://res.cloudinary.com/liquidcoder/image/upload/v1614171516/Blog/TextOverview/ezllskctxlcjsydvfpm0.png\",\n    \"alt\": \"https://res.cloudinary.com/liquidcoder/image/upload/v1614171516/Blog/TextOverview/ezllskctxlcjsydvfpm0.png\"\n  }))))), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-swift\"\n  }), \"// $$liquidcoderID-TextOverviewFixedSize3\\n// $$liquidcoderFilename-ContentView\\n\\nimport SwiftUI\\n\\nstruct ContentView: View {\\n\\n    var body: some View {\\n\\n        ScrollView {\\n            VStack {\\n                Image(\\\"image\\\")\\n                    .resizable()\\n                    .frame(width: 200, height: 200, alignment: .center)\\n                    .scaledToFit()\\n                Text(\\\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. \\\")\\n                    // highlight-start\\n                    .fixedSize(horizontal: false, vertical: true)\\n                    // highlight-end\\n                    .background(Color.yellow)\\n            }\\n        }\\n    }\\n}\\n\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-swift\"\n  }), \"// $$liquidcoderID-TextOverviewAltInit1\\n\\npublic init<Subject>(_ subject: Subject, formatter: Formatter) where Subject : NSObject\\npublic init<Subject>(_ subject: Subject, formatter: Formatter) where Subject : ReferenceConvertible\\n\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-swift\"\n  }), \"// $$liquidcoderID-TextOverviewAltInit3\\n// $$liquidcoderFilename-ContentView\\n\\nimport SwiftUI\\n\\nstruct ContentView: View {\\n\\n    // highlight-start\\n    private var dateFormatter: DateFormatter {\\n        let formatter = DateFormatter()\\n        formatter.dateStyle = .long\\n        formatter.timeStyle = .medium\\n        return formatter\\n    }\\n    // highlight-end\\n\\n    var body: some View {\\n\\n        // highlight-start\\n        VStack {\\n            Text(Date(), formatter: dateFormatter)\\n        }\\n        // highlight-end\\n    }\\n}\\n\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-swift\"\n  }), \"// $$liquidcoderID-TextOverviewConcatenation\\n// $$liquidcoderFilename-ContentView\\n\\nimport SwiftUI\\n\\nstruct ContentView: View {\\n\\n    @State private var animate: Bool = false\\n\\n    var body: some View {\\n\\n        // highlight-start\\n        Text(\\\"Hello\\\")\\n            + Text(\\\" World \\\\(Text(\\\"\\uD83D\\uDC4B\\uD83C\\uDFFD\\uD83D\\uDC4B\\uD83C\\uDFFD\\uD83D\\uDC4B\\uD83C\\uDFFD\\\"))\\\")\\n            .bold()\\n            .foregroundColor(.blue)\\n        // highlight-end\\n    }\\n}\\n\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-swift\"\n  }), \"// $$liquidcoderID-TextOverviewFinalDemo\\n// $$liquidcoderFilename-ContentView\\n\\nimport SwiftUI\\n\\nstruct ContentView: View {\\n\\n    // highlight-start\\n    @State private var animate: Bool = false\\n    // highlight-end\\n\\n    var body: some View {\\n\\n        GeometryReader { geometry in\\n            VStack {\\n                Text(\\\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. \\\")\\n                    // highlight-start\\n                    .fixedSize(horizontal: true, vertical: false)\\n                    // highlight-end\\n            }.animation(Animation\\n                            .linear(duration: 5)\\n                            .delay(3)\\n                            .repeatForever()\\n            // highlight-start\\n            )\\n            .frame(width: geometry.size.width, alignment: animate ? .trailing : .leading)\\n                                // highlight-end\\n        }.onAppear {\\n            animate.toggle()\\n        }\\n    }\\n}\\n\")));\n}\n;\nMDXContent.isMDXComponent = true;"}},"explanation":{"childMdx":{"body":"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {};\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, [\"components\"]);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"div\", {\n    id: \"TextOverviewIntro-Section\",\n    className: \"post-section\"\n  }, mdx(\"h2\", null, \"Introduction\"), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"Apple says: \\\"A view that displays one or more lines of read-only text.\\\"\")), mdx(\"p\", null, \"That definition is clear enough to understand, but I will also add that \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Text\"), \" is arguably the most used swiftUI View of all.\")), mdx(\"div\", {\n    id: \"TextOverview1-Section\",\n    className: \"post-section\"\n  }, mdx(\"h2\", null, \"Getting started\"), mdx(\"p\", null, \"To get started, just create a simple project. \"), mdx(\"p\", null, \"Once created, you get the simplest \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Text\"), \" view that you can have with no modifier.\")), mdx(\"div\", {\n    id: \"TextOverview2-Section\",\n    className: \"post-section\"\n  }, mdx(\"h2\", null, \"Applying Fonts\"), mdx(\"p\", null, \"To change font of a given \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Text\"), \" , apple gives us the  \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"font(_:)\"), \" modifier.\"), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"Apple says about \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"font(_:)\"), \": \\\"Sets the default font for text in this view.\\\"\"))), mdx(\"div\", {\n    id: \"TextOverview3-Section\",\n    className: \"post-section\"\n  }, mdx(\"p\", null, \"As you have just seen, the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"font(_:)\"), \" modifier takes in a \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Font\"), \" type, and returns a \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"View\"), \".\"), mdx(\"p\", null, \"The \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Font\"), \" has some pre-defined values, but you can also create a new instance using the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"system\"), \" method if you want to use the system font or using the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"custom\"), \" method to create a new font from a custom font.\")), mdx(\"div\", {\n    id: \"TextOverviewModifiersIntro-Section\",\n    className: \"post-section\"\n  }, mdx(\"p\", null, \"Now let's go over some modifiers that one can apply to a \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Text\"), \" view.\")), mdx(\"div\", {\n    id: \"TextOverviewKerning1-Section\",\n    className: \"post-section\"\n  }, mdx(\"h2\", null, \"Kerning\"), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"Apple says:\\\"Sets the spacing, or kerning, between characters\\\"\"))), mdx(\"div\", {\n    id: \"TextOverviewBaselineOffset-Section\",\n    className: \"post-section\"\n  }, mdx(\"h2\", null, \"BaselineOffset\"), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"Apple says: \\\"Sets the vertical offset for the text relative to its baseline.\\\"\"))), mdx(\"div\", {\n    id: \"TextOverviewTextCase-Section\",\n    className: \"post-section\"\n  }, mdx(\"h2\", null, \"TextCase\"), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"Apple says: \\\"Sets a transform for the case of the text contained in this view when displayed.\\\"\"))), mdx(\"div\", {\n    id: \"TextOverviewMinimumScaleFactor-Section\",\n    className: \"post-section\"\n  }, mdx(\"h2\", null, \"MinimumScaleFactor\"), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"Apple says: \\\"Sets the minimum amount that text in this view scales down to fit in the available space.\\\"\"))), mdx(\"div\", {\n    id: \"TextOverviewLineNumber-Section\",\n    className: \"post-section\"\n  }, mdx(\"h2\", null, \"LineNumber\"), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"Apple says:\\\"Sets the maximum number of lines that text can occupy in this view.\\\"\"))), mdx(\"div\", {\n    id: \"TextOverviewLineSpacing-Section\",\n    className: \"post-section\"\n  }, mdx(\"h2\", null, \"LineSpacing\"), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"Apple says: \\\"Sets the amount of space between lines of text in this view.\\\"\"))), mdx(\"div\", {\n    id: \"TextOverviewMultilineTextAlignment-Section\",\n    className: \"post-section\"\n  }, mdx(\"h2\", null, \"MultilineTextAlignment\"), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"Apple says:\\\"Sets the alignment of multiline text in this view.\\\"\")), mdx(\"p\", null, \"This modifier takes in a parameter of type \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"TextAlignment\"), \" and returns a \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"View\"), \".\")), mdx(\"div\", {\n    id: \"TextOverviewFixedSize1-Section\",\n    className: \"post-section\"\n  }, mdx(\"h2\", null, \"FixedSize\"), mdx(\"p\", null, \"Take a look at the image, and see how the text is cut out. Well we can fix this using the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"fixedSize\"), \" modifier.\"), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"Apple says about \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"fixedSize\"), \": \\\"Fixes this view at its ideal size in the specified dimensions.\\\"\"))), mdx(\"div\", {\n    id: \"TextOverviewFixedSize2-Section\",\n    className: \"post-section\"\n  }, mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"Apple also says: \\\" \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"fixedSize(horizontal:vertical:)\"), \"  the fixing of the axes can be optionally specified in one or both dimensions. For example, if you  horizontally fix a text view before wrapping it in the frame view,  you're telling the text view to maintain its ideal \", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"width\"), \". The view  calculates this to be the space needed to represent the entire string.\\\"\"))), mdx(\"div\", {\n    id: \"TextOverviewFixedSize3-Section\",\n    className: \"post-section\"\n  }, mdx(\"p\", null, \"To fix the issue where the text does not appear in full, just add the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"fixedSize\"), \" modifier setting only the vertical dimension to true to fix the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Text\"), \" 's height.\")), mdx(\"div\", {\n    id: \"TextOverviewAltInit0-Section\",\n    className: \"post-section\"\n  }, mdx(\"p\", null, \"The \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Text\"), \" struct has multiple overloads for the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"init\"), \" method which allow you to pass a bunch of extra parameter to format the content.\")), mdx(\"div\", {\n    id: \"TextOverviewAltInit1-Section\",\n    className: \"post-section\"\n  }, mdx(\"h2\", null, \"Text with Formatter\"), mdx(\"p\", null, \"As you can see, the initialiser takes in a  subject to be formatted and a formatter to use.\")), mdx(\"div\", {\n    id: \"TextOverviewAltInit2-Section\",\n    className: \"post-section\"\n  }, mdx(\"p\", null, \"Here is a list of pre-built formatters that one can use\"), mdx(\"p\", null, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://developer.apple.com/documentation/foundation/bytecountformatter\"\n  }), \"ByteCountFormatter\"), \", \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://developer.apple.com/documentation/foundation/dateformatter\"\n  }), \"DateFormatter\"), \", \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://developer.apple.com/documentation/foundation/datecomponentsformatter\"\n  }), \"DateComponentsFormatter\"), \", \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://developer.apple.com/documentation/foundation/dateintervalformatter\"\n  }), \"DateIntervalFormatter\"), \", \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://developer.apple.com/documentation/foundation/energyformatter\"\n  }), \"EnergyFormatter\"), \", \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://developer.apple.com/documentation/foundation/lengthformatter\"\n  }), \"LengthFormatter\"), \", \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://developer.apple.com/documentation/foundation/massformatter\"\n  }), \"MassFormatter\"), \", \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://developer.apple.com/documentation/foundation/numberformatter\"\n  }), \"NumberFormatter\"), \", and \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://developer.apple.com/documentation/foundation/personnamecomponentsformatter\"\n  }), \"PersonNameComponentsFormatter\"), \".\")), mdx(\"div\", {\n    id: \"TextOverviewAltInit3-Section\",\n    className: \"post-section\"\n  }, mdx(\"p\", null, \"Let's take the DateFormatter as an example, and use it.\"), mdx(\"hr\", null), mdx(\"p\", null, \"We first create the formatter, then create the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Text\"), \" using it. This will style the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Text\"), \" content according to the style you set in formatter.\")), mdx(\"div\", {\n    id: \"TextOverviewConcatenation-Section\",\n    className: \"post-section\"\n  }, mdx(\"h2\", null, \"Text Concatenation\"), mdx(\"p\", null, \"You can also concatenate 2 or more instances of a \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Text\"), \" using a \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"\\\"+\\\"\"), \" sign or the traditional swift way, and give each fragment a different style.\")), mdx(\"div\", {\n    id: \"TextOverviewFinalDemo-Section\",\n    className: \"post-section\"\n  }, mdx(\"h2\", null, \"Sliding Text Effect\"), mdx(\"p\", null, \"The main recipe to create that sliding is the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"fixedSize\"), \" modifier. This time we set the horizontal dimension to true to prevent the text from wrapping .\")), mdx(\"div\", {\n    id: \"TextOverviewOutro-Section\",\n    className: \"post-section\"\n  }, mdx(\"p\", null, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Text\"), \" is pretty important in a user interface, it tells stories where pictures and other UI elements display them, and this is just an overview to get you started using it.\")));\n}\n;\nMDXContent.isMDXComponent = true;"}},"downloads":null,"resources":[{"name":"Apple developer documentation","url":"https://developer.apple.com/documentation/swiftui/text"}],"body":{"childMdx":{"tableOfContents":{"items":[{"url":"#introduction","title":"Introduction"},{"url":"#getting-started","title":"Getting started"},{"url":"#applying-fonts","title":"Applying Fonts"},{"url":"#kerning","title":"Kerning"},{"url":"#baselineoffset","title":"BaselineOffset"},{"url":"#textcase","title":"TextCase"},{"url":"#minimumscalefactor","title":"MinimumScaleFactor"},{"url":"#linenumber","title":"LineNumber"},{"url":"#linespacing","title":"LineSpacing"},{"url":"#multilinetextalignment","title":"MultilineTextAlignment"},{"url":"#fixedsize","title":"FixedSize"},{"url":"#text-with-formatter","title":"Text with Formatter"},{"url":"#text-concatenation","title":"Text Concatenation"},{"url":"#sliding-text-effect","title":"Sliding Text Effect"}]},"body":"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {};\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, [\"components\"]);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"h2\", null, \"Introduction\"), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"Apple says: \\\"A view that displays one or more lines of read-only text.\\\"\")), mdx(\"p\", null, \"That definition is clear enough to understand, but I will also add that \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Text\"), \" is arguably the most used swiftUI View of all.\"), mdx(\"h2\", null, \"Getting started\"), mdx(\"p\", null, \"To get started, just create a simple project. \"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-swift\"\n  }), \"// $$liquidcoderID-TextOverview1\\n// $$liquidcoderFilename-ContentView\\n\\nimport SwiftUI\\n\\nstruct ContentView: View {\\n\\n    var body: some View {\\n\\n        // highlight-start\\n        Text(\\\"Hello, world!\\\")\\n        // highlight-end\\n\\n    }\\n}\\n\\nstruct ContentView_Previews: PreviewProvider {\\n    static var previews: some View {\\n        ContentView()\\n    }\\n}\\n\")), mdx(\"p\", null, \"Once created, you get the simplest \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Text\"), \" view that you can have with no modifier.\"), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"https://res.cloudinary.com/liquidcoder/image/upload/v1614070336/StreamCast/Shared/grfn8p6fxdrey0t1tuef.png\",\n    \"alt\": \"https://res.cloudinary.com/liquidcoder/image/upload/v1614070336/StreamCast/Shared/grfn8p6fxdrey0t1tuef.png\"\n  }))), mdx(\"h2\", null, \"Applying Fonts\"), mdx(\"p\", null, \"To change font of a given \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Text\"), \" , apple gives us the  \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"font(_:)\"), \" modifier.\"), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"Apple says about \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"font(_:)\"), \": \\\"Sets the default font for text in this view.\\\"\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-swift\"\n  }), \"\\nfunc font(_ font: Font?) -> some View\\n\")), mdx(\"p\", null, \"As you have just seen, the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"font(_:)\"), \" modifier takes in a \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Font\"), \" type, and returns a \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"View\"), \".\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-swift\"\n  }), \"\\nextension Font {\\n\\n    /// A font with the large title text style.\\n    public static let largeTitle: Font\\n\\n    /// A font with the title text style.\\n    public static let title: Font\\n\\n    /// Create a font for second level hierarchical headings.\\n    @available(iOS 14.0, macOS 11.0, tvOS 14.0, watchOS 7.0, *)\\n    public static let title2: Font\\n\\n    /// Create a font for third level hierarchical headings.\\n    @available(iOS 14.0, macOS 11.0, tvOS 14.0, watchOS 7.0, *)\\n    public static let title3: Font\\n\\n    /// A font with the headline text style.\\n    public static let headline: Font\\n\\n    /// A font with the subheadline text style.\\n    public static let subheadline: Font\\n\\n    /// A font with the body text style.\\n    public static let body: Font\\n\\n    /// A font with the callout text style.\\n    public static let callout: Font\\n\\n    /// A font with the footnote text style.\\n    public static let footnote: Font\\n\\n    /// A font with the caption text style.\\n    public static let caption: Font\\n\\n    /// Create a font with the alternate caption text style.\\n    @available(iOS 14.0, macOS 11.0, tvOS 14.0, watchOS 7.0, *)\\n    public static let caption2: Font\\n\\n    /// Gets a system font with the given style and design.\\n    public static func system(_ style: Font.TextStyle, design: Font.Design = .default) -> Font\\n\\n        /// Adds italics to the font.\\n    public func italic() -> Font\\n\\n    /// Adjusts the font to enable all small capitals.\\n    public func smallCaps() -> Font\\n\\n    /// Adjusts the font to enable lowercase small capitals.\\n    public func lowercaseSmallCaps() -> Font\\n\\n    /// Adjusts the font to enable uppercase small capitals.\\n    public func uppercaseSmallCaps() -> Font\\n\\n    /// Adjusts the font to use monospace digits.\\n    public func monospacedDigit() -> Font\\n\\n    /// Sets the weight of the font.\\n    public func weight(_ weight: Font.Weight) -> Font\\n\\n    /// Adds bold styling to the font.\\n    public func bold() -> Font\\n\\n        public static func custom(_ name: String, size: CGFloat) -> Font\\n\\n    /// Create a custom font with the given `name` and `size` that scales\\n    /// relative to the given `textStyle`.\\n    @available(iOS 14.0, macOS 11.0, tvOS 14.0, watchOS 7.0, *)\\n    public static func custom(_ name: String, size: CGFloat, relativeTo textStyle: Font.TextStyle) -> Font\\n\\n    /// Create a custom font with the given `name` and a fixed `size` that does\\n    /// not scale with Dynamic Type.\\n    @available(iOS 14.0, macOS 11.0, tvOS 14.0, watchOS 7.0, *)\\n    public static func custom(_ name: String, fixedSize: CGFloat) -> Font\\n}\\n\")), mdx(\"p\", null, \"The \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Font\"), \" has some pre-defined values, but you can also create a new instance using the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"system\"), \" method if you want to use the system font or using the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"custom\"), \" method to create a new font from a custom font.\"), mdx(\"p\", null, \"Now let's go over some modifiers that one can apply to a \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Text\"), \" view.\"), mdx(\"h2\", null, \"Kerning\"), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"Apple says:\\\"Sets the spacing, or kerning, between characters\\\"\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-swift\"\n  }), \"// $$liquidcoderFilename-ContentView\\n\\nimport SwiftUI\\n\\nstruct ContentView: View {\\n\\n    // highlight-start\\n    @State private var value: Double = 0\\n    // highlight-end\\n\\n    var body: some View {\\n\\n        // highlight-start\\n        VStack {\\n            Text(\\\"Hello, world!\\\")\\n                .kerning(CGFloat(value))\\n\\n            Slider(value: $value, in: 0...100, step: 0.1)\\n        }\\n        // highlight-end\\n\\n    }\\n}\\n\")), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"https://res.cloudinary.com/liquidcoder/image/upload/v1614171478/Blog/TextOverview/s2olupzxbptxkrzkzolz.gif\",\n    \"alt\": \"https://res.cloudinary.com/liquidcoder/image/upload/v1614171478/Blog/TextOverview/s2olupzxbptxkrzkzolz.gif\"\n  }))), mdx(\"h2\", null, \"BaselineOffset\"), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"Apple says: \\\"Sets the vertical offset for the text relative to its baseline.\\\"\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-swift\"\n  }), \"\\nimport SwiftUI\\n\\nstruct ContentView: View {\\n\\n    @State private var value: Double = 0\\n\\n    var body: some View {\\n\\n        VStack {\\n            Text(\\\"Hello, world!\\\")\\n                // highlight-start\\n                .baselineOffset(CGFloat(value))\\n                // highlight-end\\n                .background(Color.blue)\\n\\n            Slider(value: $value, in: 0...100, step: 0.1)\\n        }\\n    }\\n}\\n\\nstruct ContentView_Previews: PreviewProvider {\\n    static var previews: some View {\\n        ContentView()\\n    }\\n}\\n\")), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"https://res.cloudinary.com/liquidcoder/image/upload/v1614171480/Blog/TextOverview/tjg3sufma1ecced5sjqj.gif\",\n    \"alt\": \"https://res.cloudinary.com/liquidcoder/image/upload/v1614171480/Blog/TextOverview/tjg3sufma1ecced5sjqj.gif\"\n  }))), mdx(\"h2\", null, \"TextCase\"), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"Apple says: \\\"Sets a transform for the case of the text contained in this view when displayed.\\\"\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-swift\"\n  }), \"// $$liquidcoderID-TextOverviewTextCase\\n// $$liquidcoderFilename-ContentView\\n\\nimport SwiftUI\\n\\nstruct ContentView: View {\\n\\n    // highlight-start\\n    @State private var flag: Bool = false\\n    // highlight-end\\n\\n    var body: some View {\\n\\n        VStack {\\n            Text(\\\"Hello, world!\\\")\\n                // highlight-start\\n                .textCase( flag ? .uppercase : .lowercase)\\n                // highlight-end\\n\\n            // highlight-start\\n            Toggle(isOn: $flag, label: {\\n                Text(\\\"Change case\\\")\\n            })\\n            // highlight-end            \\n        }\\n    }\\n}\\n\")), mdx(\"h2\", null, \"MinimumScaleFactor\"), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"Apple says: \\\"Sets the minimum amount that text in this view scales down to fit in the available space.\\\"\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-swift\"\n  }), \"\\nimport SwiftUI\\n\\nstruct ContentView: View {\\n\\n    @State private var value: Double = 0    \\n\\n    var body: some View {\\n\\n        VStack {\\n            Text(\\\"A very loooooooooong text\\\")\\n                // highlight-start\\n                .minimumScaleFactor(CGFloat(value))\\n                // highlight-end\\n                .frame(width: 50, height: 30)\\n                .background(Color.yellow)\\n\\n            Text(\\\"Scale: \\\\(value)\\\")\\n\\n            Slider(value: $value, in: 0...1, step: 0.1)\\n        }\\n    }\\n}\\n\")), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"https://res.cloudinary.com/liquidcoder/image/upload/v1614171480/Blog/TextOverview/l3ccamy3wl7trmibwlmu.gif\",\n    \"alt\": \"https://res.cloudinary.com/liquidcoder/image/upload/v1614171480/Blog/TextOverview/l3ccamy3wl7trmibwlmu.gif\"\n  }))), mdx(\"h2\", null, \"LineNumber\"), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"Apple says:\\\"Sets the maximum number of lines that text can occupy in this view.\\\"\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-swift\"\n  }), \"\\nimport SwiftUI\\n\\nstruct ContentView: View {\\n\\n    @State private var value: Double = 0\\n\\n    var body: some View {\\n\\n        VStack {\\n            Text(\\\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, \\\")\\n                // highlight-start\\n                .lineLimit(Int(value))\\n                // highlight-end\\n                .frame(width: 100)\\n                .background(Color.yellow)\\n\\n            Text(\\\"Line number: \\\\(Int(value))\\\")\\n\\n            Slider(value: $value, in: 0...10, step: 0.1)\\n        }\\n    }\\n}\\n\")), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"https://res.cloudinary.com/liquidcoder/image/upload/v1614171479/Blog/TextOverview/ugzr13kzrlkjcfls9d4d.gif\",\n    \"alt\": \"https://res.cloudinary.com/liquidcoder/image/upload/v1614171479/Blog/TextOverview/ugzr13kzrlkjcfls9d4d.gif\"\n  }))), mdx(\"h2\", null, \"LineSpacing\"), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"Apple says: \\\"Sets the amount of space between lines of text in this view.\\\"\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-swift\"\n  }), \"\\nimport SwiftUI\\n\\nstruct ContentView: View {\\n\\n    @State private var value: Double = 0\\n\\n    var body: some View {\\n\\n        VStack {\\n            Text(\\\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\\\")\\n                // highlight-start\\n                .lineSpacing(CGFloat(value))\\n                // highlight-end\\n                .frame(width: 100)\\n                .background(Color.yellow)\\n\\n            Text(\\\"Line number: \\\\(Int(value))\\\")\\n\\n            Slider(value: $value, in: 0...10, step: 0.1)\\n        }\\n    }\\n}\\n\")), mdx(\"h2\", null, \"MultilineTextAlignment\"), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"Apple says:\\\"Sets the alignment of multiline text in this view.\\\"\")), mdx(\"p\", null, \"This modifier takes in a parameter of type \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"TextAlignment\"), \" and returns a \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"View\"), \".\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-swift\"\n  }), \"\\nimport SwiftUI\\n\\nstruct ContentView: View {\\n\\n    @State private var value: Double = 0\\n\\n    // highlight-start\\n    @State private var alignment: TextAlignment = .leading\\n    // highlight-end\\n\\n    var body: some View {\\n\\n        VStack {\\n            Text(\\\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\\\")\\n                // highlight-start\\n                .multilineTextAlignment(alignment)\\n                // highlight-end\\n                .background(Color.yellow)\\n\\n            HStack(spacing: 30) {\\n                Button (action: {\\n                    alignment = .leading\\n                }, label: {\\n                    Image(systemName: \\\"text.alignleft\\\")\\n                        .resizable()\\n                        .frame(width: 30, height: 30, alignment: .center)\\n                })\\n\\n                Button (action: {\\n                    alignment = .center\\n                }, label: {\\n                    Image(systemName: \\\"text.aligncenter\\\")\\n                        .resizable()\\n                        .frame(width: 30, height: 30, alignment: .center)\\n                })\\n\\n                Button (action: {\\n                    alignment = .trailing\\n                }, label: {\\n                    Image(systemName: \\\"text.alignright\\\")\\n                        .resizable()\\n                        .frame(width: 30, height: 30, alignment: .center)\\n                })\\n            }.padding()\\n        }\\n    }\\n}\\n\")), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"https://res.cloudinary.com/liquidcoder/image/upload/v1614171479/Blog/TextOverview/zdx1unetm7u7hfcl1mbl.gif\",\n    \"alt\": \"https://res.cloudinary.com/liquidcoder/image/upload/v1614171479/Blog/TextOverview/zdx1unetm7u7hfcl1mbl.gif\"\n  }))), mdx(\"h2\", null, \"FixedSize\"), mdx(\"p\", null, \"Take a look at the image, and see how the text is cut out. Well we can fix this using the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"fixedSize\"), \" modifier.\"), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"https://res.cloudinary.com/liquidcoder/image/upload/v1614171516/Blog/TextOverview/ezllskctxlcjsydvfpm0.png\",\n    \"alt\": \"https://res.cloudinary.com/liquidcoder/image/upload/v1614171516/Blog/TextOverview/ezllskctxlcjsydvfpm0.png\"\n  }))), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"Apple says about \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"fixedSize\"), \": \\\"Fixes this view at its ideal size in the specified dimensions.\\\"\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-swift\"\n  }), \"\\nimport SwiftUI\\n\\nstruct ContentView: View {\\n\\n    var body: some View {\\n\\n        ScrollView {\\n            VStack {\\n                Image(\\\"image\\\")\\n                    .resizable()\\n                    .frame(width: 200, height: 200, alignment: .center)\\n                    .scaledToFit()\\n                Text(\\\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. \\\")\\n                    // highlight-start\\n                    .fixedSize(horizontal: false, vertical: true)\\n                    // highlight-end\\n                    .background(Color.yellow)\\n            }\\n        }\\n    }\\n}\\n\")), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"Apple also says: \\\" \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"fixedSize(horizontal:vertical:)\"), \"  the fixing of the axes can be optionally specified in one or both dimensions. For example, if you  horizontally fix a text view before wrapping it in the frame view,  you're telling the text view to maintain its ideal \", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"width\"), \". The view  calculates this to be the space needed to represent the entire string.\\\"\")), mdx(\"p\", null, \"To fix the issue where the text does not appear in full, just add the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"fixedSize\"), \" modifier setting only the vertical dimension to true to fix the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Text\"), \" 's height.\"), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"https://res.cloudinary.com/liquidcoder/image/upload/v1614171510/Blog/TextOverview/qanjrcvcjek2me8tzpao.png\",\n    \"alt\": \"https://res.cloudinary.com/liquidcoder/image/upload/v1614171510/Blog/TextOverview/qanjrcvcjek2me8tzpao.png\"\n  }))), mdx(\"p\", null, \"The \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Text\"), \" struct has multiple overloads for the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"init\"), \" method which allow you to pass a bunch of extra parameter to format the content.\"), mdx(\"h2\", null, \"Text with Formatter\"), mdx(\"p\", null, \"As you can see, the initialiser takes in a  subject to be formatted and a formatter to use.\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-swift\"\n  }), \"\\npublic init<Subject>(_ subject: Subject, formatter: Formatter) where Subject : NSObject\\npublic init<Subject>(_ subject: Subject, formatter: Formatter) where Subject : ReferenceConvertible\\n\")), mdx(\"p\", null, \"Here is a list of pre-built formatters that one can use\"), mdx(\"p\", null, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://developer.apple.com/documentation/foundation/bytecountformatter\"\n  }), \"ByteCountFormatter\"), \", \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://developer.apple.com/documentation/foundation/dateformatter\"\n  }), \"DateFormatter\"), \", \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://developer.apple.com/documentation/foundation/datecomponentsformatter\"\n  }), \"DateComponentsFormatter\"), \", \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://developer.apple.com/documentation/foundation/dateintervalformatter\"\n  }), \"DateIntervalFormatter\"), \", \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://developer.apple.com/documentation/foundation/energyformatter\"\n  }), \"EnergyFormatter\"), \", \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://developer.apple.com/documentation/foundation/lengthformatter\"\n  }), \"LengthFormatter\"), \", \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://developer.apple.com/documentation/foundation/massformatter\"\n  }), \"MassFormatter\"), \", \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://developer.apple.com/documentation/foundation/numberformatter\"\n  }), \"NumberFormatter\"), \", and \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://developer.apple.com/documentation/foundation/personnamecomponentsformatter\"\n  }), \"PersonNameComponentsFormatter\"), \".\"), mdx(\"p\", null, \"Let's take the DateFormatter as an example, and use it.\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-swift\"\n  }), \"// $$liquidcoderID-TextOverviewAltInit3\\n// $$liquidcoderFilename-ContentView\\n\\nimport SwiftUI\\n\\nstruct ContentView: View {\\n\\n    // highlight-start\\n    private var dateFormatter: DateFormatter {\\n        let formatter = DateFormatter()\\n        formatter.dateStyle = .long\\n        formatter.timeStyle = .medium\\n        return formatter\\n    }\\n    // highlight-end\\n\\n    var body: some View {\\n\\n        // highlight-start\\n        VStack {\\n            Text(Date(), formatter: dateFormatter)\\n        }\\n        // highlight-end\\n    }\\n}\\n\")), mdx(\"p\", null, \"We first create the formatter, then create the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Text\"), \" using it. This will style the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Text\"), \" content according to the style you set in formatter.\"), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"https://res.cloudinary.com/liquidcoder/image/upload/v1614244374/Blog/TextOverview/plmrczlyf50qsw4udu6e.png\",\n    \"alt\": \"https://res.cloudinary.com/liquidcoder/image/upload/v1614244374/Blog/TextOverview/plmrczlyf50qsw4udu6e.png\"\n  }))), mdx(\"h2\", null, \"Text Concatenation\"), mdx(\"p\", null, \"You can also concatenate 2 or more instances of a \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Text\"), \" using a \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"\\\"+\\\"\"), \" sign or the traditional swift way, and give each fragment a different style.\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-swift\"\n  }), \"\\nimport SwiftUI\\n\\nstruct ContentView: View {\\n\\n    @State private var animate: Bool = false\\n\\n    var body: some View {\\n\\n        // highlight-start\\n        Text(\\\"Hello\\\")\\n            + Text(\\\" World \\\\(Text(\\\"\\uD83D\\uDC4B\\uD83C\\uDFFD\\uD83D\\uDC4B\\uD83C\\uDFFD\\uD83D\\uDC4B\\uD83C\\uDFFD\\\"))\\\")\\n            .bold()\\n            .foregroundColor(.blue)\\n        // highlight-end\\n    }\\n}\\n\")), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"https://res.cloudinary.com/liquidcoder/image/upload/v1614172390/Blog/TextOverview/sz4cjfru7xvnyfsfge49.png\",\n    \"alt\": \"https://res.cloudinary.com/liquidcoder/image/upload/v1614172390/Blog/TextOverview/sz4cjfru7xvnyfsfge49.png\"\n  }))), mdx(\"h2\", null, \"Sliding Text Effect\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-swift\"\n  }), \"// $$liquidcoderID-TextOverviewFinalDemo\\n// $$liquidcoderFilename-ContentView\\n\\nimport SwiftUI\\n\\nstruct ContentView: View {\\n\\n    // highlight-start\\n    @State private var animate: Bool = false\\n    // highlight-end\\n\\n    var body: some View {\\n\\n        GeometryReader { geometry in\\n            VStack {\\n                Text(\\\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. \\\")\\n                    // highlight-start\\n                    .fixedSize(horizontal: true, vertical: false)\\n                    // highlight-end\\n            }.animation(Animation\\n                            .linear(duration: 5)\\n                            .delay(3)\\n                            .repeatForever()\\n            )\\n            .frame(width: geometry.size.width, alignment: animate ? .trailing : .leading)\\n        }.onAppear {\\n            animate.toggle()\\n        }\\n    }\\n}\\n\")), mdx(\"p\", null, \"The main recipe to create that sliding is the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"fixedSize\"), \" modifier. This time we set the horizontal dimension to true to prevent the text from wrapping .\"), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"https://res.cloudinary.com/liquidcoder/image/upload/v1614171500/Blog/TextOverview/hzk7cr7hpiqabwr9m7jh.gif\",\n    \"alt\": \"https://res.cloudinary.com/liquidcoder/image/upload/v1614171500/Blog/TextOverview/hzk7cr7hpiqabwr9m7jh.gif\"\n  }))), mdx(\"p\", null, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Text\"), \" is pretty important in a user interface, it tells stories where pictures and other UI elements display them, and this is just an overview to get you started using it.\"), mdx(\"p\", null, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://res.cloudinary.com/liquidcoder/image/upload/v1614171510/Blog/TextOverview/qanjrcvcjek2me8tzpao.png\"\n  }), \"https://res.cloudinary.com/liquidcoder/image/upload/v1614171510/Blog/TextOverview/qanjrcvcjek2me8tzpao.png\")));\n}\n;\nMDXContent.isMDXComponent = true;","excerpt":"Introduction Apple says: \"A view that displays one or more lines of read-only text.\" That definition is clear enough to understand, but I will also add that  Text  is arguably the most used swiftUI View of all. Getting started To get started, just create a simple project.  Once created, you get the…"}}}},"pageContext":{"slug":"text-overview-for-beginners"}},"staticQueryHashes":["1047155515","1278771865","2517639938","2517639938","2537039069","3452127246","3566879862","3891201089","439617394","670651827"]}