Xcode Question posted in
Whether you're new to Xcode or an experienced developer, our archive has everything you need to know about this integrated development environment (IDE). From basic functionalities to advanced features, our archive covers a wide range of Xcode-related questions and answers. Browse our archive now and find solutions to your Xcode questions, and take your app development skills to the next level

Xcode – How should I correctly set 'Follow Readable Width' from interface builder?

This is just a sample project I’m using to test some AutoLayout stuff.

I’m using Follow Readable Width but then the label is still going all the way to the edges. I’ve tried a number of variations but nothing worked…

When I inspect it from the viewDebugger, I see no trace of setting the Readable Width.

Anyone know what am I doing wrong?

enter image description here

EDIT:

Followed instructions based on provided answer. I did the following:

  • set ‘Follow Readable Width’ on the superview
  • set constraints between the label and its superview’s margins
  • set my label’s number of lines to 0

enter image description here

But it’s still not working.

Tags:

2

Answers


  1. 0

    Apple’s docs on this are, perhaps, somewhat lacking…

    Follow Readable Width uses the readableContentGuide to determine the "comfortable readable width" (based, I’m sure, on plenty of research).

    However, as may not be entirely intuitive, it applies to a view’s subviews — not to the view itself.

    So, look at this example. Two plain view controllers, each with a standard UILabel. Number of lines: 0, system font at 22.0.

    Note they are constrained to the superview's margins (Top: 80, Leading: 0, Trailing: 0) — NOT to the safe-area!

    The only difference is that the (root) View of the VC on the right has Follow Readable Width checked (True).

    enter image description here

    The frame of each label (using iPhone 12 Pro Max) is 388 x 144.

    If we rotate them to Landscape Orientation (and move the right-hand VC below):

    enter image description here

    We can see the label has a different frame:

    • non- Follow Readable Width: 806 x 105.33
    • with Follow Readable Width: 664 x 131.33

    And, to clarify what’s being set:

    enter image description here

    Here’s another example…

    • Label is embedded in GreenView
    • GreenView is constrained to (root) View Safe Area (Top: 80, Leading: 0, Trailing: 0)
    • Label is constrained to GreenView’s Margins — Zero on all four sides

    Neither VC has Follow Readable Width checked on the (root) View

    GreenView in the right-hand / bottom VC does have Follow Readable Width checked (True):

    enter image description here

    enter image description here

    Edit – here’s the Storyboard source for inspection (includes both examples):

    <?xml version="1.0" encoding="UTF-8"?>
<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="17701" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES">
    <device id="retina6_7" orientation="portrait" appearance="light"/>
    <dependencies>
        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="17703"/>
        <capability name="Safe area layout guides" minToolsVersion="9.0"/>
        <capability name="System colors in document resources" minToolsVersion="11.0"/>
        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
    </dependencies>
    <scenes>
        <!--NonReadableWidth-->
        <scene sceneID="lu6-SQ-BUQ">
            <objects>
                <viewController title="NonReadableWidth" id="gRl-Y3-q5b" sceneMemberID="viewController">
                    <view key="view" contentMode="scaleToFill" id="KgH-rz-3jW">
                        <rect key="frame" x="0.0" y="0.0" width="428" height="926"/>
                        <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
                        <subviews>
                            <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" textAlignment="natural" lineBreakMode="tailTruncation" numberOfLines="0" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="i34-a2-9TU" userLabel="TestLabel">
                                <rect key="frame" x="20" y="124" width="388" height="184"/>
                                <color key="backgroundColor" red="0.45138680930000002" green="0.99309605359999997" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                <string key="text">A label can contain an arbitrary amount of text, but UILabel may shrink, wrap, or truncate the text, depending on the size of the bounding rectangle and properties you set. You can control the font, text color, alignment, highlighting, and shadowing of the text in the label.</string>
                                <fontDescription key="fontDescription" type="system" pointSize="22"/>
                                <nil key="textColor"/>
                                <nil key="highlightedColor"/>
                            </label>
                        </subviews>
                        <viewLayoutGuide key="safeArea" id="emo-4y-MRr"/>
                        <color key="backgroundColor" systemColor="systemBackgroundColor"/>
                        <constraints>
                            <constraint firstAttribute="trailingMargin" secondItem="i34-a2-9TU" secondAttribute="trailing" id="0gf-bk-gRh"/>
                            <constraint firstItem="i34-a2-9TU" firstAttribute="top" secondItem="KgH-rz-3jW" secondAttribute="topMargin" constant="80" id="XTe-xu-XW0"/>
                            <constraint firstItem="i34-a2-9TU" firstAttribute="leading" secondItem="KgH-rz-3jW" secondAttribute="leadingMargin" id="cLh-qf-Blk"/>
                        </constraints>
                    </view>
                </viewController>
                <placeholder placeholderIdentifier="IBFirstResponder" id="yRa-z0-zb1" userLabel="First Responder" customClass="UIResponder" sceneMemberID="firstResponder"/>
            </objects>
            <point key="canvasLocation" x="-1440" y="-237"/>
        </scene>
        <!--ReadableWidth-->
        <scene sceneID="TAR-hp-Z7a">
            <objects>
                <viewController title="ReadableWidth" id="NWi-IO-XoQ" sceneMemberID="viewController">
                    <view key="view" contentMode="scaleToFill" layoutMarginsFollowReadableWidth="YES" id="kow-Rb-hSd">
                        <rect key="frame" x="0.0" y="0.0" width="428" height="926"/>
                        <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
                        <subviews>
                            <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" textAlignment="natural" lineBreakMode="tailTruncation" numberOfLines="0" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="vcL-Mg-4cn" userLabel="TestLabel">
                                <rect key="frame" x="20" y="124" width="388" height="184"/>
                                <color key="backgroundColor" red="0.45138680930000002" green="0.99309605359999997" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                <string key="text">A label can contain an arbitrary amount of text, but UILabel may shrink, wrap, or truncate the text, depending on the size of the bounding rectangle and properties you set. You can control the font, text color, alignment, highlighting, and shadowing of the text in the label.</string>
                                <fontDescription key="fontDescription" type="system" pointSize="22"/>
                                <nil key="textColor"/>
                                <nil key="highlightedColor"/>
                            </label>
                        </subviews>
                        <viewLayoutGuide key="safeArea" id="S18-p2-v7t"/>
                        <color key="backgroundColor" systemColor="systemBackgroundColor"/>
                        <constraints>
                            <constraint firstItem="vcL-Mg-4cn" firstAttribute="top" secondItem="kow-Rb-hSd" secondAttribute="topMargin" constant="80" id="UMj-EB-aOr"/>
                            <constraint firstAttribute="trailingMargin" secondItem="vcL-Mg-4cn" secondAttribute="trailing" id="abZ-c7-vbB"/>
                            <constraint firstItem="vcL-Mg-4cn" firstAttribute="leading" secondItem="kow-Rb-hSd" secondAttribute="leadingMargin" id="mWF-6m-rMe"/>
                        </constraints>
                    </view>
                </viewController>
                <placeholder placeholderIdentifier="IBFirstResponder" id="hUJ-qH-o5E" userLabel="First Responder" customClass="UIResponder" sceneMemberID="firstResponder"/>
            </objects>
            <point key="canvasLocation" x="-763" y="-237"/>
        </scene>
        <!--NonRWSubview-->
        <scene sceneID="WVm-0d-Od7">
            <objects>
                <viewController title="NonRWSubview" id="6R3-mW-Koq" sceneMemberID="viewController">
                    <view key="view" contentMode="scaleToFill" id="Liz-uX-God">
                        <rect key="frame" x="0.0" y="0.0" width="428" height="926"/>
                        <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
                        <subviews>
                            <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="sXo-q5-J4x">
                                <rect key="frame" x="0.0" y="124" width="428" height="200"/>
                                <subviews>
                                    <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" textAlignment="natural" lineBreakMode="tailTruncation" numberOfLines="0" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="0s4-WT-JDV" userLabel="TestLabel">
                                        <rect key="frame" x="8" y="8" width="412" height="184"/>
                                        <color key="backgroundColor" red="0.45138680930000002" green="0.99309605359999997" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                        <string key="text">A label can contain an arbitrary amount of text, but UILabel may shrink, wrap, or truncate the text, depending on the size of the bounding rectangle and properties you set. You can control the font, text color, alignment, highlighting, and shadowing of the text in the label.</string>
                                        <fontDescription key="fontDescription" type="system" pointSize="22"/>
                                        <nil key="textColor"/>
                                        <nil key="highlightedColor"/>
                                    </label>
                                </subviews>
                                <color key="backgroundColor" systemColor="systemGreenColor"/>
                                <constraints>
                                    <constraint firstAttribute="bottomMargin" secondItem="0s4-WT-JDV" secondAttribute="bottom" id="7h2-iB-UEo"/>
                                    <constraint firstItem="0s4-WT-JDV" firstAttribute="leading" secondItem="sXo-q5-J4x" secondAttribute="leadingMargin" id="TGM-zO-ZYC"/>
                                    <constraint firstAttribute="trailingMargin" secondItem="0s4-WT-JDV" secondAttribute="trailing" id="jF5-JY-Ci4"/>
                                    <constraint firstItem="0s4-WT-JDV" firstAttribute="top" secondItem="sXo-q5-J4x" secondAttribute="topMargin" id="qol-3c-qpg"/>
                                </constraints>
                            </view>
                        </subviews>
                        <viewLayoutGuide key="safeArea" id="5qA-FN-o9s"/>
                        <color key="backgroundColor" systemColor="systemBackgroundColor"/>
                        <constraints>
                            <constraint firstItem="5qA-FN-o9s" firstAttribute="trailing" secondItem="sXo-q5-J4x" secondAttribute="trailing" id="8FD-5n-0JT"/>
                            <constraint firstItem="sXo-q5-J4x" firstAttribute="leading" secondItem="5qA-FN-o9s" secondAttribute="leading" id="NOW-Zj-cj5"/>
                            <constraint firstItem="sXo-q5-J4x" firstAttribute="top" secondItem="5qA-FN-o9s" secondAttribute="top" constant="80" id="r8c-cG-kir"/>
                        </constraints>
                    </view>
                </viewController>
                <placeholder placeholderIdentifier="IBFirstResponder" id="cCS-co-iqT" userLabel="First Responder" customClass="UIResponder" sceneMemberID="firstResponder"/>
            </objects>
            <point key="canvasLocation" x="282" y="-237"/>
        </scene>
        <!--RWSubview-->
        <scene sceneID="74o-tj-jGs">
            <objects>
                <viewController title="RWSubview" id="UlY-lL-nBK" sceneMemberID="viewController">
                    <view key="view" contentMode="scaleToFill" id="jzc-UN-DU3">
                        <rect key="frame" x="0.0" y="0.0" width="428" height="926"/>
                        <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
                        <subviews>
                            <view contentMode="scaleToFill" layoutMarginsFollowReadableWidth="YES" translatesAutoresizingMaskIntoConstraints="NO" id="l3Q-Yv-r11">
                                <rect key="frame" x="0.0" y="124" width="428" height="200"/>
                                <subviews>
                                    <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" textAlignment="natural" lineBreakMode="tailTruncation" numberOfLines="0" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="0vx-Wy-qHn" userLabel="TestLabel">
                                        <rect key="frame" x="8" y="8" width="412" height="184"/>
                                        <color key="backgroundColor" red="0.45138680930000002" green="0.99309605359999997" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                        <string key="text">A label can contain an arbitrary amount of text, but UILabel may shrink, wrap, or truncate the text, depending on the size of the bounding rectangle and properties you set. You can control the font, text color, alignment, highlighting, and shadowing of the text in the label.</string>
                                        <fontDescription key="fontDescription" type="system" pointSize="22"/>
                                        <nil key="textColor"/>
                                        <nil key="highlightedColor"/>
                                    </label>
                                </subviews>
                                <color key="backgroundColor" systemColor="systemGreenColor"/>
                                <constraints>
                                    <constraint firstAttribute="trailingMargin" secondItem="0vx-Wy-qHn" secondAttribute="trailing" id="CrF-ue-Xql"/>
                                    <constraint firstItem="0vx-Wy-qHn" firstAttribute="top" secondItem="l3Q-Yv-r11" secondAttribute="topMargin" id="TuR-Zy-RMp"/>
                                    <constraint firstAttribute="bottomMargin" secondItem="0vx-Wy-qHn" secondAttribute="bottom" id="qPz-fc-ru5"/>
                                    <constraint firstItem="0vx-Wy-qHn" firstAttribute="leading" secondItem="l3Q-Yv-r11" secondAttribute="leadingMargin" id="uSi-gN-Z2k"/>
                                </constraints>
                            </view>
                        </subviews>
                        <viewLayoutGuide key="safeArea" id="3pL-pi-ttG"/>
                        <color key="backgroundColor" systemColor="systemBackgroundColor"/>
                        <constraints>
                            <constraint firstItem="l3Q-Yv-r11" firstAttribute="leading" secondItem="3pL-pi-ttG" secondAttribute="leading" id="0XL-rC-Vvb"/>
                            <constraint firstItem="3pL-pi-ttG" firstAttribute="trailing" secondItem="l3Q-Yv-r11" secondAttribute="trailing" id="0x6-gc-xNv"/>
                            <constraint firstItem="l3Q-Yv-r11" firstAttribute="top" secondItem="3pL-pi-ttG" secondAttribute="top" constant="80" id="r0G-V7-Yya"/>
                        </constraints>
                    </view>
                </viewController>
                <placeholder placeholderIdentifier="IBFirstResponder" id="yWI-Io-PLo" userLabel="First Responder" customClass="UIResponder" sceneMemberID="firstResponder"/>
            </objects>
            <point key="canvasLocation" x="950" y="-237"/>
        </scene>
    </scenes>
    <resources>
        <systemColor name="systemBackgroundColor">
            <color white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
        </systemColor>
        <systemColor name="systemGreenColor">
            <color red="0.20392156862745098" green="0.7803921568627451" blue="0.34901960784313724" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
        </systemColor>
    </resources>
</document>

    Edit 2

    I put an example project here: https://github.com/DonMag/FollowReadableWidth

    Note, though, that I have found this to be rather quirky (maybe buggy). See the notes in the example.

    Login or Signup to reply.
  2. 0

    I finally found something that works dependably for Readable width.  This article shows "Constrains to margins" checked.  I’ve found if I delete the tableView’s original leading and trailing constraints and replace them with ones made in the "Add New Constraints" control that includes "Constrain to margins" (checked) then the tableView respects the "Follow readable width" (checked) of the root view.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search